Merge pull request #6272 from logto-io/gao-init-modal-and-input

feat(elements): init modal and input

packages/elements/README.md

@@ -31,11 +31,11 @@ When using `msg()`, a human-readable ID should be used, and it is highly recomme
 
 ```ts
 // ✅ Good
-msg('Not available', {
-  id: 'form-card.fallback-title',
-  desc: 'The fallback title of a form card when the title is not provided.',
+msg('Not set', {
+  id: 'general.fallback-title',
+  desc: 'A fallback title when the title or heading of a component is not provided.',
 })
 
 // ❌ Bad
-msg('Not available')
+msg('Not set')
 ```

packages/elements/package.json

@@ -28,14 +28,15 @@
   },
   "scripts": {
     "precommit": "lint-staged",
-    "build": "pnpm check && lit-localize build && tsup",
+    "build:only": "lit-localize build && tsup",
+    "build": "pnpm check && pnpm build:only",
     "start": "web-dev-server",
     "dev": "lit-localize build && tsup --watch --no-splitting",
     "lint": "eslint --ext .ts src",
     "lint:report": "pnpm lint --format json --output-file report.json",
     "test": "echo \"No tests yet.\"",
     "test:ci": "pnpm run test --silent --coverage",
-    "prepack": "pnpm build",
+    "prepack": "pnpm build:only",
     "localize": "lit-localize",
     "check": "if command -v git &> /dev/null; then lit-localize extract && git add . -N && git diff --exit-code; fi"
   },
@@ -46,6 +47,7 @@
     "url": "https://github.com/logto-io/logto/issues"
   },
   "dependencies": {
+    "@lit/context": "^1.1.2",
     "@lit/localize": "^0.12.1",
     "@lit/react": "^1.0.5",
     "@silverhand/essentials": "^2.9.1",
@@ -55,6 +57,7 @@
     "@lit/localize-tools": "^0.7.2",
     "@silverhand/eslint-config": "6.0.1",
     "@silverhand/ts-config": "6.0.0",
+    "@types/node": "^20.9.5",
     "@web/dev-server": "^0.4.6",
     "@web/dev-server-esbuild": "^1.0.2",
     "eslint": "^8.56.0",

packages/elements/src/components/logto-button.ts

@@ -32,7 +32,7 @@ export class LogtoButton extends LitElement {
 
     :host([type='text']) {
       background: none;
-      border-color: none;
+      border-color: transparent;
       font: ${vars.fontLabel2};
       color: ${vars.colorTextLink};
       padding: ${unit(0.5, 1)};

packages/elements/src/components/logto-card-section.ts

@@ -21,9 +21,9 @@ export class LogtoCardSection extends LitElement {
   `;
 
   @property()
-  heading = msg('Not available', {
-    id: 'form-card.fallback-title',
-    desc: 'The fallback title of a form card when the title is not provided.',
+  heading = msg('Not set', {
+    id: 'general.fallback-title',
+    desc: 'A fallback title when the title or heading of a component is not provided.',
   });
 
   render() {

packages/elements/src/components/logto-form-card.ts

@@ -57,9 +57,9 @@ export class LogtoFormCard extends LitElement {
   `;
 
   @property()
-  heading = msg('Not available', {
-    id: 'form-card.fallback-title',
-    desc: 'The fallback title of a form card when the title is not provided.',
+  heading = msg('Not set', {
+    id: 'general.fallback-title',
+    desc: 'A fallback title when the title or heading of a component is not provided.',
   });
 
   @property()

packages/elements/src/components/logto-icon-button.ts

@@ -0,0 +1,51 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import { unit } from '../utils/css.js';
+import { vars } from '../utils/theme.js';
+
+const tagName = 'logto-icon-button';
+
+@customElement(tagName)
+export class LogtoIconButton extends LitElement {
+  static tagName = tagName;
+
+  static styles = css`
+    :host {
+      all: unset;
+      border-radius: ${unit(1.5)};
+      transition: background 0.2s ease-in-out;
+      padding: ${unit(1)};
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    :host(:disabled) {
+      cursor: not-allowed;
+    }
+
+    :host(:focus-visible) {
+      background: ${vars.colorFocused};
+    }
+
+    :host(:not(:disabled):hover) {
+      background: ${vars.colorHover};
+    }
+
+    ::slotted(svg) {
+      color: ${vars.colorTextSecondary};
+    }
+  `;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.role = 'button';
+    this.tabIndex = 0;
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

packages/elements/src/components/logto-modal-layout.ts

@@ -0,0 +1,62 @@
+import { consume } from '@lit/context';
+import { localized, msg } from '@lit/localize';
+import { cond, noop } from '@silverhand/essentials';
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import closeIcon from '../icons/close.svg';
+import { unit } from '../utils/css.js';
+import { vars } from '../utils/theme.js';
+
+import { ModalContext, type ModalContextType } from './logto-modal.context.js';
+
+const tagName = 'logto-modal-layout';
+
+/**
+ * A typical layout for a modal. It includes a header, a footer, and a slot for the content.
+ *
+ * Note: A consumable modal context ({@link ModalContext}) is required to use this component.
+ */
+@customElement(tagName)
+@localized()
+export class LogtoModalLayout extends LitElement {
+  static tagName = tagName;
+
+  static styles = css`
+    header {
+      font: ${vars.fontTitle1};
+      color: ${vars.colorTextPrimary};
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: ${unit(6)};
+    }
+
+    h1 {
+      all: unset;
+    }
+  `;
+
+  @property({ reflect: true })
+  heading = msg('Not set', {
+    id: 'general.fallback-title',
+    desc: 'A fallback title when the title or heading of a component is not provided.',
+  });
+
+  @consume({ context: ModalContext })
+  context!: ModalContextType;
+
+  render() {
+    return html`
+      <header>
+        <h1>${this.heading}</h1>
+        ${cond(
+          this.context.onClose !== noop &&
+            html`<logto-icon-button @click=${this.context.onClose}>${closeIcon}</logto-icon-button>`
+        )}
+      </header>
+      <slot></slot>
+      <footer></footer>
+    `;
+  }
+}

packages/elements/src/components/logto-modal.context.ts

@@ -0,0 +1,16 @@
+import { createContext } from '@lit/context';
+import { noop } from '@silverhand/essentials';
+
+/** @see {@link ModalContext} */
+export type ModalContextType = { onClose: () => void };
+
+/**
+ * Context for the modal component. It's useful for operating the modal from deep in the component
+ * tree. For example, closing the modal from a child component.
+ */
+export const ModalContext = createContext<ModalContextType>('modal-context');
+
+/** The default value for the modal context. */
+export const modalContext: ModalContextType = {
+  onClose: noop,
+};

packages/elements/src/components/logto-modal.ts

@@ -0,0 +1,88 @@
+import { provide } from '@lit/context';
+import { noop } from '@silverhand/essentials';
+import { LitElement, html, css, type PropertyValues } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { type Ref, createRef, ref } from 'lit/directives/ref.js';
+
+import { unit } from '../utils/css.js';
+import { vars } from '../utils/theme.js';
+
+import { ModalContext, modalContext } from './logto-modal.context.js';
+
+const tagName = 'logto-modal';
+
+@customElement(tagName)
+export class LogtoModal extends LitElement {
+  static tagName = tagName;
+
+  static styles = css`
+    dialog {
+      padding: 0;
+      border: none;
+      color: ${vars.colorTextPrimary};
+      background: ${vars.colorLayer1};
+      border-radius: ${unit(4)};
+      padding: ${unit(6)};
+      width: 95%;
+      max-width: 600px;
+      min-width: 300px;
+    }
+
+    dialog::backdrop {
+      background-color: ${vars.colorOverlay};
+    }
+  `;
+
+  @property({ type: Boolean, reflect: true })
+  open = false;
+
+  @property()
+  onClose = noop;
+
+  @provide({ context: ModalContext })
+  context = modalContext;
+
+  protected dialogRef: Ref<HTMLDialogElement> = createRef();
+
+  render() {
+    return html`<dialog
+      ${ref(this.dialogRef)}
+      @keydown=${(event: KeyboardEvent) => {
+        // The "right" way should be to use the `@cancel` event, but it doesn't always work and the
+        // browser support is unknown. See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/cancel_event#browser_compatibility
+        if (event.key === 'Escape') {
+          event.preventDefault();
+          this.onClose();
+        }
+      }}
+    >
+      <slot></slot>
+    </dialog> `;
+  }
+
+  protected toggleDialog() {
+    if (this.open) {
+      this.dialogRef.value?.showModal();
+    } else {
+      this.dialogRef.value?.close();
+    }
+  }
+
+  protected handlePropertiesChange(changedProperties: PropertyValues) {
+    if (changedProperties.has('open')) {
+      this.toggleDialog();
+    }
+
+    if (changedProperties.has('onClose')) {
+      this.context.onClose = this.onClose;
+    }
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues): void {
+    this.handlePropertiesChange(changedProperties);
+  }
+
+  protected updated(changedProperties: PropertyValues): void {
+    this.handlePropertiesChange(changedProperties);
+  }
+}

packages/elements/src/components/logto-text-input.ts

@@ -0,0 +1,85 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
+
+import { unit } from '../utils/css.js';
+import { vars } from '../utils/theme.js';
+
+const tagName = 'logto-text-input';
+
+@customElement(tagName)
+export class LogtoTextInput extends LitElement {
+  static tagName = tagName;
+  static styles = css`
+    :host {
+      display: flex;
+      position: relative;
+      border-radius: ${unit(1.5)};
+      border: 1px solid ${vars.colorBorder};
+      outline: 3px solid transparent;
+      transition-property: outline, border;
+      transition-timing-function: ease-in-out;
+      transition-duration: 0.2s;
+      height: 36px;
+      background: ${vars.colorLayer1};
+      font: ${vars.fontBody2};
+      padding: 0 ${unit(3)};
+    }
+
+    :host(:focus-within) {
+      border-color: ${vars.colorPrimary};
+      outline-color: ${vars.colorFocusedVariant};
+    }
+
+    :host([disabled]) {
+      background: ${vars.colorDisabledBackground};
+      color: ${vars.colorTextSecondary};
+      border-color: ${vars.colorBorder};
+      cursor: not-allowed;
+    }
+
+    :host([readonly]) {
+      background: ${vars.colorLayer2};
+    }
+
+    :host([readonly]:focus-within) {
+      border-color: ${vars.colorBorder};
+      outline-color: transparent;
+    }
+
+    ::slotted(input) {
+      all: unset;
+      flex: 1;
+      color: ${vars.colorTextPrimary};
+    }
+
+    ::slotted(input::placeholder) {
+      color: ${vars.colorPlaceholder};
+    }
+
+    ::slotted(input:webkit-autofill) {
+      box-shadow: 0 0 0 ${unit(6)} ${vars.colorLayer1} inset;
+      -webkit-text-fill-color: ${vars.colorTextPrimary};
+      caret-color: ${vars.colorTextPrimary};
+    }
+  `;
+
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  @property({ type: Boolean, reflect: true })
+  readonly = false;
+
+  @queryAssignedElements({ selector: 'input' })
+  slotInputs!: HTMLInputElement[];
+
+  render() {
+    return html`<slot @slotchange=${this.handleSlotChange}></slot>`;
+  }
+
+  protected handleSlotChange() {
+    if (this.slotInputs[0] && this.slotInputs.length === 1) {
+      this.disabled = this.slotInputs[0].disabled;
+      this.readonly = this.slotInputs[0].readOnly;
+    }
+  }
+}

packages/elements/src/elements/logto-profile-card.ts

@@ -1,6 +1,6 @@
 import { localized, msg } from '@lit/localize';
 import { LitElement, css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 
 import { vars } from '../utils/theme.js';
 
@@ -16,6 +16,9 @@ export class LogtoProfileCard extends LitElement {
     }
   `;
 
+  @state()
+  updateNameOpened = false;
+
   render() {
     return html`
       <logto-form-card heading=${msg('Profile', { id: 'account.profile.title' })}>
@@ -49,14 +52,41 @@ export class LogtoProfileCard extends LitElement {
               </div>
               <div slot="content">John Doe</div>
               <div slot="actions">
-                <logto-button type="text">
-                  ${msg('Change', { id: 'general.change' })}
+                <logto-button
+                  type="text"
+                  @click=${() => {
+                    this.updateNameOpened = true;
+                  }}
+                >
+                  ${msg('Update', { id: 'general.update' })}
                 </logto-button>
               </div>
             </logto-list-row>
           </logto-list>
         </logto-card-section>
       </logto-form-card>
+      <logto-modal
+        ?open=${this.updateNameOpened}
+        .onClose=${() => {
+          this.updateNameOpened = false;
+        }}
+      >
+        <logto-modal-layout
+          heading=${msg('Update name', {
+            id: 'account.profile.personal-info.update-name',
+          })}
+        >
+          <logto-text-input>
+            <input
+              placeholder=${msg('Person Doe', {
+                id: 'account.profile.personal-info.name-placeholder',
+                desc: 'The placeholder for the name input field.',
+              })}
+              value=""
+            />
+          </logto-text-input>
+        </logto-modal-layout>
+      </logto-modal>
     `;
   }
 }

packages/elements/src/icons/close.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M13.4099 12.0002L19.7099 5.71019C19.8982 5.52188 20.004 5.26649 20.004 5.00019C20.004 4.73388 19.8982 4.47849 19.7099 4.29019C19.5216 4.10188 19.2662 3.99609 18.9999 3.99609C18.7336 3.99609 18.4782 4.10188 18.2899 4.29019L11.9999 10.5902L5.70994 4.29019C5.52164 4.10188 5.26624 3.99609 4.99994 3.99609C4.73364 3.99609 4.47824 4.10188 4.28994 4.29019C4.10164 4.47849 3.99585 4.73388 3.99585 5.00019C3.99585 5.26649 4.10164 5.52188 4.28994 5.71019L10.5899 12.0002L4.28994 18.2902C4.19621 18.3831 4.12182 18.4937 4.07105 18.6156C4.02028 18.7375 3.99414 18.8682 3.99414 19.0002C3.99414 19.1322 4.02028 19.2629 4.07105 19.3848C4.12182 19.5066 4.19621 19.6172 4.28994 19.7102C4.3829 19.8039 4.4935 19.8783 4.61536 19.9291C4.73722 19.9798 4.86793 20.006 4.99994 20.006C5.13195 20.006 5.26266 19.9798 5.38452 19.9291C5.50638 19.8783 5.61698 19.8039 5.70994 19.7102L11.9999 13.4102L18.2899 19.7102C18.3829 19.8039 18.4935 19.8783 18.6154 19.9291C18.7372 19.9798 18.8679 20.006 18.9999 20.006C19.132 20.006 19.2627 19.9798 19.3845 19.9291C19.5064 19.8783 19.617 19.8039 19.7099 19.7102C19.8037 19.6172 19.8781 19.5066 19.9288 19.3848C19.9796 19.2629 20.0057 19.1322 20.0057 19.0002C20.0057 18.8682 19.9796 18.7375 19.9288 18.6156C19.8781 18.4937 19.8037 18.3831 19.7099 18.2902L13.4099 12.0002Z"
+    fill="currentColor" />
+</svg>

packages/elements/src/icons/index.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const value: string;
+  export default value;
+}

packages/elements/src/index.ts

@@ -3,8 +3,12 @@ export * from './components/logto-button.js';
 export * from './components/logto-card-section.js';
 export * from './components/logto-card.js';
 export * from './components/logto-form-card.js';
+export * from './components/logto-icon-button.js';
 export * from './components/logto-list-row.js';
 export * from './components/logto-list.js';
+export * from './components/logto-modal-layout.js';
+export * from './components/logto-modal.js';
+export * from './components/logto-text-input.js';
 export * from './components/logto-theme-provider.js';
 export * from './elements/logto-profile-card.js';
 export * from './utils/locale.js';

packages/elements/src/utils/theme.ts

@@ -14,13 +14,21 @@ export type Color = {
   colorLayer2: string;
   colorLineDivider: string;
   colorDisabled: string;
+  colorDisabledBackground: string;
   colorHover: string;
   colorHoverVariant: string;
+  colorPressed: string;
+  colorFocused: string;
   colorFocusedVariant: string;
+  colorOverlay: string;
+  colorPlaceholder: string;
 };
 
 /** All the fonts to be used in the Logto components and elements. */
 export type Font = {
+  fontTitle1: string;
+  fontTitle2: string;
+  fontTitle3: string;
   fontLabel1: string;
   fontLabel2: string;
   fontLabel3: string;
@@ -38,6 +46,9 @@ export const defaultFontFamily =
   '-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji';
 
 export const defaultFont: Readonly<Font> = Object.freeze({
+  fontTitle1: `600 20px / 28px ${defaultFontFamily}`,
+  fontTitle2: `600 16px / 24px ${defaultFontFamily}`,
+  fontTitle3: `600 14px / 20px ${defaultFontFamily}`,
   fontLabel1: `500 16px / 24px ${defaultFontFamily}`,
   fontLabel2: `500 14px / 20px ${defaultFontFamily}`,
   fontLabel3: `500 12px / 16px ${defaultFontFamily}`,
@@ -60,9 +71,14 @@ export const defaultTheme: Readonly<Theme> = Object.freeze({
   colorLayer2: '#2d3132',
   colorLineDivider: '#191c1d1f',
   colorDisabled: '#5c5f60',
+  colorDisabledBackground: '#2d3132',
   colorHover: '#191c1d14',
   colorHoverVariant: '#5d34f214',
+  colorPressed: 'rgba(25, 28, 29, 12%)',
+  colorFocused: 'rgba(25, 28, 29, 16%)',
   colorFocusedVariant: '#5d34f229',
+  colorOverlay: '#000000b3',
+  colorPlaceholder: '#747778',
 });
 
 export const darkTheme: Readonly<Theme> = Object.freeze({
@@ -77,9 +93,14 @@ export const darkTheme: Readonly<Theme> = Object.freeze({
   colorLayer2: '#34353f',
   colorLineDivider: '#f7f8f824',
   colorDisabled: '#5c5f60',
+  colorDisabledBackground: '#2d3132',
   colorHover: '#f7f8f814',
   colorHoverVariant: '#cabeff14',
+  colorPressed: 'rgba(247, 248, 248, 12%)',
+  colorFocused: 'rgba(247, 248, 248, 16%)',
   colorFocusedVariant: '#cabeff29',
+  colorOverlay: '#0000003c',
+  colorPlaceholder: '#747778',
 });
 
 /**

packages/elements/tsup.config.ts

@@ -1,3 +1,5 @@
+import fs from 'node:fs/promises';
+
 import { defineConfig } from 'tsup';
 
 export default defineConfig({
@@ -5,4 +7,17 @@ export default defineConfig({
   format: 'esm',
   dts: true,
   clean: true,
+  esbuildPlugins: [
+    {
+      name: 'transform-svg',
+      setup: (build) => {
+        build.onLoad({ filter: /\.svg$/ }, async (arguments_) => {
+          const text = await fs.readFile(arguments_.path, 'utf8');
+          return {
+            contents: `import { html } from 'lit';\nexport default html\`${text}\`;`,
+          };
+        });
+      },
+    },
+  ],
 });

packages/elements/web-dev-server.config.js

@@ -15,6 +15,18 @@ const config = {
       ts: true,
       tsconfig: fileURLToPath(new URL('tsconfig.json', import.meta.url)),
     }),
+    // Transform SVG files into Lit templates
+    {
+      name: 'transform-svg',
+      transform(context) {
+        if (context.path.endsWith('.svg')) {
+          return {
+            body: `import { html } from 'lit';\nexport default html\`${context.body}\`;`,
+            headers: { 'content-type': 'application/javascript' },
+          };
+        }
+      },
+    },
   ],
 };
 

packages/elements/xliff/de.xlf

@@ -2,17 +2,6 @@
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
 <file target-language="de" source-language="en" original="lit-localize-inputs" datatype="plaintext">
 <body>
-<trans-unit id="form-card.fallback-title">
-  <source>Not available</source>
-  <target>Nicht verfügbar</target>
-  <note from="lit-localize">The fallback title of a form card when the title is not provided.</note>
-</trans-unit>
-<trans-unit id="account.profile.title">
-  <source>Profile</source>
-</trans-unit>
-<trans-unit id="account.profile.personal-info.title">
-  <source>Personal information</source>
-</trans-unit>
 <trans-unit id="general.title">
   <source>Title</source>
 </trans-unit>
@@ -22,9 +11,25 @@
 <trans-unit id="general.actions">
   <source>Actions</source>
 </trans-unit>
+<trans-unit id="account.profile.title">
+  <source>Profile</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.title">
+  <source>Personal information</source>
+</trans-unit>
 <trans-unit id="general.change">
   <source>Change</source>
 </trans-unit>
+<trans-unit id="general.update">
+  <source>Update</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.update-name">
+  <source>Update name</source>
+</trans-unit>
+<trans-unit id="general.fallback-title">
+  <source>Not set</source>
+  <note from="lit-localize">A fallback title when the title or heading of a component is not provided.</note>
+</trans-unit>
 <trans-unit id="account.profile.personal-info.avatar">
   <source>Avatar</source>
   <note from="lit-localize">The avatar of the user.</note>
@@ -33,6 +38,10 @@
   <source>Name</source>
   <note from="lit-localize">The name of the user.</note>
 </trans-unit>
+<trans-unit id="account.profile.personal-info.name-placeholder">
+  <source>Person Doe</source>
+  <note from="lit-localize">The placeholder for the name input field.</note>
+</trans-unit>
 </body>
 </file>
 </xliff>

packages/elements/xliff/es.xlf

@@ -2,17 +2,6 @@
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
 <file target-language="es" source-language="en" original="lit-localize-inputs" datatype="plaintext">
 <body>
-<trans-unit id="form-card.fallback-title">
-  <source>Not available</source>
-  <target>No disponible</target>
-  <note from="lit-localize">The fallback title of a form card when the title is not provided.</note>
-</trans-unit>
-<trans-unit id="account.profile.title">
-  <source>Profile</source>
-</trans-unit>
-<trans-unit id="account.profile.personal-info.title">
-  <source>Personal information</source>
-</trans-unit>
 <trans-unit id="general.title">
   <source>Title</source>
 </trans-unit>
@@ -22,9 +11,25 @@
 <trans-unit id="general.actions">
   <source>Actions</source>
 </trans-unit>
+<trans-unit id="account.profile.title">
+  <source>Profile</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.title">
+  <source>Personal information</source>
+</trans-unit>
 <trans-unit id="general.change">
   <source>Change</source>
 </trans-unit>
+<trans-unit id="general.update">
+  <source>Update</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.update-name">
+  <source>Update name</source>
+</trans-unit>
+<trans-unit id="general.fallback-title">
+  <source>Not set</source>
+  <note from="lit-localize">A fallback title when the title or heading of a component is not provided.</note>
+</trans-unit>
 <trans-unit id="account.profile.personal-info.avatar">
   <source>Avatar</source>
   <note from="lit-localize">The avatar of the user.</note>
@@ -33,6 +38,10 @@
   <source>Name</source>
   <note from="lit-localize">The name of the user.</note>
 </trans-unit>
+<trans-unit id="account.profile.personal-info.name-placeholder">
+  <source>Person Doe</source>
+  <note from="lit-localize">The placeholder for the name input field.</note>
+</trans-unit>
 </body>
 </file>
 </xliff>

packages/elements/xliff/fr.xlf

@@ -2,17 +2,6 @@
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
 <file target-language="fr" source-language="en" original="lit-localize-inputs" datatype="plaintext">
 <body>
-<trans-unit id="form-card.fallback-title">
-  <source>Not available</source>
-  <target>Non disponible</target>
-  <note from="lit-localize">The fallback title of a form card when the title is not provided.</note>
-</trans-unit>
-<trans-unit id="account.profile.title">
-  <source>Profile</source>
-</trans-unit>
-<trans-unit id="account.profile.personal-info.title">
-  <source>Personal information</source>
-</trans-unit>
 <trans-unit id="general.title">
   <source>Title</source>
 </trans-unit>
@@ -22,9 +11,25 @@
 <trans-unit id="general.actions">
   <source>Actions</source>
 </trans-unit>
+<trans-unit id="account.profile.title">
+  <source>Profile</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.title">
+  <source>Personal information</source>
+</trans-unit>
 <trans-unit id="general.change">
   <source>Change</source>
 </trans-unit>
+<trans-unit id="general.update">
+  <source>Update</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.update-name">
+  <source>Update name</source>
+</trans-unit>
+<trans-unit id="general.fallback-title">
+  <source>Not set</source>
+  <note from="lit-localize">A fallback title when the title or heading of a component is not provided.</note>
+</trans-unit>
 <trans-unit id="account.profile.personal-info.avatar">
   <source>Avatar</source>
   <note from="lit-localize">The avatar of the user.</note>
@@ -33,6 +38,10 @@
   <source>Name</source>
   <note from="lit-localize">The name of the user.</note>
 </trans-unit>
+<trans-unit id="account.profile.personal-info.name-placeholder">
+  <source>Person Doe</source>
+  <note from="lit-localize">The placeholder for the name input field.</note>
+</trans-unit>
 </body>
 </file>
 </xliff>

packages/elements/xliff/it.xlf

@@ -2,17 +2,6 @@
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
 <file target-language="it" source-language="en" original="lit-localize-inputs" datatype="plaintext">
 <body>
-<trans-unit id="form-card.fallback-title">
-  <source>Not available</source>
-  <target>Non disponibile</target>
-  <note from="lit-localize">The fallback title of a form card when the title is not provided.</note>
-</trans-unit>
-<trans-unit id="account.profile.title">
-  <source>Profile</source>
-</trans-unit>
-<trans-unit id="account.profile.personal-info.title">
-  <source>Personal information</source>
-</trans-unit>
 <trans-unit id="general.title">
   <source>Title</source>
 </trans-unit>
@@ -22,9 +11,25 @@
 <trans-unit id="general.actions">
   <source>Actions</source>
 </trans-unit>
+<trans-unit id="account.profile.title">
+  <source>Profile</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.title">
+  <source>Personal information</source>
+</trans-unit>
 <trans-unit id="general.change">
   <source>Change</source>
 </trans-unit>
+<trans-unit id="general.update">
+  <source>Update</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.update-name">
+  <source>Update name</source>
+</trans-unit>
+<trans-unit id="general.fallback-title">
+  <source>Not set</source>
+  <note from="lit-localize">A fallback title when the title or heading of a component is not provided.</note>
+</trans-unit>
 <trans-unit id="account.profile.personal-info.avatar">
   <source>Avatar</source>
   <note from="lit-localize">The avatar of the user.</note>
@@ -33,6 +38,10 @@
   <source>Name</source>
   <note from="lit-localize">The name of the user.</note>
 </trans-unit>
+<trans-unit id="account.profile.personal-info.name-placeholder">
+  <source>Person Doe</source>
+  <note from="lit-localize">The placeholder for the name input field.</note>
+</trans-unit>
 </body>
 </file>
 </xliff>

packages/elements/xliff/ja.xlf

@@ -2,17 +2,6 @@
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
 <file target-language="ja" source-language="en" original="lit-localize-inputs" datatype="plaintext">
 <body>
-<trans-unit id="form-card.fallback-title">
-  <source>Not available</source>
-  <target>利用できません</target>
-  <note from="lit-localize">The fallback title of a form card when the title is not provided.</note>
-</trans-unit>
-<trans-unit id="account.profile.title">
-  <source>Profile</source>
-</trans-unit>
-<trans-unit id="account.profile.personal-info.title">
-  <source>Personal information</source>
-</trans-unit>
 <trans-unit id="general.title">
   <source>Title</source>
 </trans-unit>
@@ -22,9 +11,25 @@
 <trans-unit id="general.actions">
   <source>Actions</source>
 </trans-unit>
+<trans-unit id="account.profile.title">
+  <source>Profile</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.title">
+  <source>Personal information</source>
+</trans-unit>
 <trans-unit id="general.change">
   <source>Change</source>
 </trans-unit>
+<trans-unit id="general.update">
+  <source>Update</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.update-name">
+  <source>Update name</source>
+</trans-unit>
+<trans-unit id="general.fallback-title">
+  <source>Not set</source>
+  <note from="lit-localize">A fallback title when the title or heading of a component is not provided.</note>
+</trans-unit>
 <trans-unit id="account.profile.personal-info.avatar">
   <source>Avatar</source>
   <note from="lit-localize">The avatar of the user.</note>
@@ -33,6 +38,10 @@
   <source>Name</source>
   <note from="lit-localize">The name of the user.</note>
 </trans-unit>
+<trans-unit id="account.profile.personal-info.name-placeholder">
+  <source>Person Doe</source>
+  <note from="lit-localize">The placeholder for the name input field.</note>
+</trans-unit>
 </body>
 </file>
 </xliff>

packages/elements/xliff/ko.xlf

@@ -2,17 +2,6 @@
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
 <file target-language="ko" source-language="en" original="lit-localize-inputs" datatype="plaintext">
 <body>
-<trans-unit id="form-card.fallback-title">
-  <source>Not available</source>
-  <target>사용할 수 없음</target>
-  <note from="lit-localize">The fallback title of a form card when the title is not provided.</note>
-</trans-unit>
-<trans-unit id="account.profile.title">
-  <source>Profile</source>
-</trans-unit>
-<trans-unit id="account.profile.personal-info.title">
-  <source>Personal information</source>
-</trans-unit>
 <trans-unit id="general.title">
   <source>Title</source>
 </trans-unit>
@@ -22,9 +11,25 @@
 <trans-unit id="general.actions">
   <source>Actions</source>
 </trans-unit>
+<trans-unit id="account.profile.title">
+  <source>Profile</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.title">
+  <source>Personal information</source>
+</trans-unit>
 <trans-unit id="general.change">
   <source>Change</source>
 </trans-unit>
+<trans-unit id="general.update">
+  <source>Update</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.update-name">
+  <source>Update name</source>
+</trans-unit>
+<trans-unit id="general.fallback-title">
+  <source>Not set</source>
+  <note from="lit-localize">A fallback title when the title or heading of a component is not provided.</note>
+</trans-unit>
 <trans-unit id="account.profile.personal-info.avatar">
   <source>Avatar</source>
   <note from="lit-localize">The avatar of the user.</note>
@@ -33,6 +38,10 @@
   <source>Name</source>
   <note from="lit-localize">The name of the user.</note>
 </trans-unit>
+<trans-unit id="account.profile.personal-info.name-placeholder">
+  <source>Person Doe</source>
+  <note from="lit-localize">The placeholder for the name input field.</note>
+</trans-unit>
 </body>
 </file>
 </xliff>

packages/elements/xliff/pl-PL.xlf

@@ -2,17 +2,6 @@
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
 <file target-language="pl-PL" source-language="en" original="lit-localize-inputs" datatype="plaintext">
 <body>
-<trans-unit id="form-card.fallback-title">
-  <source>Not available</source>
-  <target>Niedostępne</target>
-  <note from="lit-localize">The fallback title of a form card when the title is not provided.</note>
-</trans-unit>
-<trans-unit id="account.profile.title">
-  <source>Profile</source>
-</trans-unit>
-<trans-unit id="account.profile.personal-info.title">
-  <source>Personal information</source>
-</trans-unit>
 <trans-unit id="general.title">
   <source>Title</source>
 </trans-unit>
@@ -22,9 +11,25 @@
 <trans-unit id="general.actions">
   <source>Actions</source>
 </trans-unit>
+<trans-unit id="account.profile.title">
+  <source>Profile</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.title">
+  <source>Personal information</source>
+</trans-unit>
 <trans-unit id="general.change">
   <source>Change</source>
 </trans-unit>
+<trans-unit id="general.update">
+  <source>Update</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.update-name">
+  <source>Update name</source>
+</trans-unit>
+<trans-unit id="general.fallback-title">
+  <source>Not set</source>
+  <note from="lit-localize">A fallback title when the title or heading of a component is not provided.</note>
+</trans-unit>
 <trans-unit id="account.profile.personal-info.avatar">
   <source>Avatar</source>
   <note from="lit-localize">The avatar of the user.</note>
@@ -33,6 +38,10 @@
   <source>Name</source>
   <note from="lit-localize">The name of the user.</note>
 </trans-unit>
+<trans-unit id="account.profile.personal-info.name-placeholder">
+  <source>Person Doe</source>
+  <note from="lit-localize">The placeholder for the name input field.</note>
+</trans-unit>
 </body>
 </file>
 </xliff>

packages/elements/xliff/pt-BR.xlf

@@ -2,17 +2,6 @@
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
 <file target-language="pt-BR" source-language="en" original="lit-localize-inputs" datatype="plaintext">
 <body>
-<trans-unit id="form-card.fallback-title">
-  <source>Not available</source>
-  <target>Não disponível</target>
-  <note from="lit-localize">The fallback title of a form card when the title is not provided.</note>
-</trans-unit>
-<trans-unit id="account.profile.title">
-  <source>Profile</source>
-</trans-unit>
-<trans-unit id="account.profile.personal-info.title">
-  <source>Personal information</source>
-</trans-unit>
 <trans-unit id="general.title">
   <source>Title</source>
 </trans-unit>
@@ -22,9 +11,25 @@
 <trans-unit id="general.actions">
   <source>Actions</source>
 </trans-unit>
+<trans-unit id="account.profile.title">
+  <source>Profile</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.title">
+  <source>Personal information</source>
+</trans-unit>
 <trans-unit id="general.change">
   <source>Change</source>
 </trans-unit>
+<trans-unit id="general.update">
+  <source>Update</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.update-name">
+  <source>Update name</source>
+</trans-unit>
+<trans-unit id="general.fallback-title">
+  <source>Not set</source>
+  <note from="lit-localize">A fallback title when the title or heading of a component is not provided.</note>
+</trans-unit>
 <trans-unit id="account.profile.personal-info.avatar">
   <source>Avatar</source>
   <note from="lit-localize">The avatar of the user.</note>
@@ -33,6 +38,10 @@
   <source>Name</source>
   <note from="lit-localize">The name of the user.</note>
 </trans-unit>
+<trans-unit id="account.profile.personal-info.name-placeholder">
+  <source>Person Doe</source>
+  <note from="lit-localize">The placeholder for the name input field.</note>
+</trans-unit>
 </body>
 </file>
 </xliff>

packages/elements/xliff/pt-PT.xlf

@@ -2,17 +2,6 @@
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
 <file target-language="pt-PT" source-language="en" original="lit-localize-inputs" datatype="plaintext">
 <body>
-<trans-unit id="form-card.fallback-title">
-  <source>Not available</source>
-  <target>Não disponível</target>
-  <note from="lit-localize">The fallback title of a form card when the title is not provided.</note>
-</trans-unit>
-<trans-unit id="account.profile.title">
-  <source>Profile</source>
-</trans-unit>
-<trans-unit id="account.profile.personal-info.title">
-  <source>Personal information</source>
-</trans-unit>
 <trans-unit id="general.title">
   <source>Title</source>
 </trans-unit>
@@ -22,9 +11,25 @@
 <trans-unit id="general.actions">
   <source>Actions</source>
 </trans-unit>
+<trans-unit id="account.profile.title">
+  <source>Profile</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.title">
+  <source>Personal information</source>
+</trans-unit>
 <trans-unit id="general.change">
   <source>Change</source>
 </trans-unit>
+<trans-unit id="general.update">
+  <source>Update</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.update-name">
+  <source>Update name</source>
+</trans-unit>
+<trans-unit id="general.fallback-title">
+  <source>Not set</source>
+  <note from="lit-localize">A fallback title when the title or heading of a component is not provided.</note>
+</trans-unit>
 <trans-unit id="account.profile.personal-info.avatar">
   <source>Avatar</source>
   <note from="lit-localize">The avatar of the user.</note>
@@ -33,6 +38,10 @@
   <source>Name</source>
   <note from="lit-localize">The name of the user.</note>
 </trans-unit>
+<trans-unit id="account.profile.personal-info.name-placeholder">
+  <source>Person Doe</source>
+  <note from="lit-localize">The placeholder for the name input field.</note>
+</trans-unit>
 </body>
 </file>
 </xliff>

packages/elements/xliff/ru.xlf

@@ -2,17 +2,6 @@
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
 <file target-language="ru" source-language="en" original="lit-localize-inputs" datatype="plaintext">
 <body>
-<trans-unit id="form-card.fallback-title">
-  <source>Not available</source>
-  <target>Недоступно</target>
-  <note from="lit-localize">The fallback title of a form card when the title is not provided.</note>
-</trans-unit>
-<trans-unit id="account.profile.title">
-  <source>Profile</source>
-</trans-unit>
-<trans-unit id="account.profile.personal-info.title">
-  <source>Personal information</source>
-</trans-unit>
 <trans-unit id="general.title">
   <source>Title</source>
 </trans-unit>
@@ -22,9 +11,25 @@
 <trans-unit id="general.actions">
   <source>Actions</source>
 </trans-unit>
+<trans-unit id="account.profile.title">
+  <source>Profile</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.title">
+  <source>Personal information</source>
+</trans-unit>
 <trans-unit id="general.change">
   <source>Change</source>
 </trans-unit>
+<trans-unit id="general.update">
+  <source>Update</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.update-name">
+  <source>Update name</source>
+</trans-unit>
+<trans-unit id="general.fallback-title">
+  <source>Not set</source>
+  <note from="lit-localize">A fallback title when the title or heading of a component is not provided.</note>
+</trans-unit>
 <trans-unit id="account.profile.personal-info.avatar">
   <source>Avatar</source>
   <note from="lit-localize">The avatar of the user.</note>
@@ -33,6 +38,10 @@
   <source>Name</source>
   <note from="lit-localize">The name of the user.</note>
 </trans-unit>
+<trans-unit id="account.profile.personal-info.name-placeholder">
+  <source>Person Doe</source>
+  <note from="lit-localize">The placeholder for the name input field.</note>
+</trans-unit>
 </body>
 </file>
 </xliff>

packages/elements/xliff/tr-TR.xlf

@@ -2,17 +2,6 @@
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
 <file target-language="tr-TR" source-language="en" original="lit-localize-inputs" datatype="plaintext">
 <body>
-<trans-unit id="form-card.fallback-title">
-  <source>Not available</source>
-  <target>Mevcut değil</target>
-  <note from="lit-localize">The fallback title of a form card when the title is not provided.</note>
-</trans-unit>
-<trans-unit id="account.profile.title">
-  <source>Profile</source>
-</trans-unit>
-<trans-unit id="account.profile.personal-info.title">
-  <source>Personal information</source>
-</trans-unit>
 <trans-unit id="general.title">
   <source>Title</source>
 </trans-unit>
@@ -22,9 +11,25 @@
 <trans-unit id="general.actions">
   <source>Actions</source>
 </trans-unit>
+<trans-unit id="account.profile.title">
+  <source>Profile</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.title">
+  <source>Personal information</source>
+</trans-unit>
 <trans-unit id="general.change">
   <source>Change</source>
 </trans-unit>
+<trans-unit id="general.update">
+  <source>Update</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.update-name">
+  <source>Update name</source>
+</trans-unit>
+<trans-unit id="general.fallback-title">
+  <source>Not set</source>
+  <note from="lit-localize">A fallback title when the title or heading of a component is not provided.</note>
+</trans-unit>
 <trans-unit id="account.profile.personal-info.avatar">
   <source>Avatar</source>
   <note from="lit-localize">The avatar of the user.</note>
@@ -33,6 +38,10 @@
   <source>Name</source>
   <note from="lit-localize">The name of the user.</note>
 </trans-unit>
+<trans-unit id="account.profile.personal-info.name-placeholder">
+  <source>Person Doe</source>
+  <note from="lit-localize">The placeholder for the name input field.</note>
+</trans-unit>
 </body>
 </file>
 </xliff>

packages/elements/xliff/zh-CN.xlf

@@ -2,17 +2,6 @@
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
 <file target-language="zh-CN" source-language="en" original="lit-localize-inputs" datatype="plaintext">
 <body>
-<trans-unit id="form-card.fallback-title">
-  <source>Not available</source>
-  <target>不可用</target>
-  <note from="lit-localize">The fallback title of a form card when the title is not provided.</note>
-</trans-unit>
-<trans-unit id="account.profile.title">
-  <source>Profile</source>
-</trans-unit>
-<trans-unit id="account.profile.personal-info.title">
-  <source>Personal information</source>
-</trans-unit>
 <trans-unit id="general.title">
   <source>Title</source>
 </trans-unit>
@@ -22,9 +11,25 @@
 <trans-unit id="general.actions">
   <source>Actions</source>
 </trans-unit>
+<trans-unit id="account.profile.title">
+  <source>Profile</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.title">
+  <source>Personal information</source>
+</trans-unit>
 <trans-unit id="general.change">
   <source>Change</source>
 </trans-unit>
+<trans-unit id="general.update">
+  <source>Update</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.update-name">
+  <source>Update name</source>
+</trans-unit>
+<trans-unit id="general.fallback-title">
+  <source>Not set</source>
+  <note from="lit-localize">A fallback title when the title or heading of a component is not provided.</note>
+</trans-unit>
 <trans-unit id="account.profile.personal-info.avatar">
   <source>Avatar</source>
   <note from="lit-localize">The avatar of the user.</note>
@@ -33,6 +38,10 @@
   <source>Name</source>
   <note from="lit-localize">The name of the user.</note>
 </trans-unit>
+<trans-unit id="account.profile.personal-info.name-placeholder">
+  <source>Person Doe</source>
+  <note from="lit-localize">The placeholder for the name input field.</note>
+</trans-unit>
 </body>
 </file>
 </xliff>

packages/elements/xliff/zh-HK.xlf

@@ -2,17 +2,6 @@
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
 <file target-language="zh-HK" source-language="en" original="lit-localize-inputs" datatype="plaintext">
 <body>
-<trans-unit id="form-card.fallback-title">
-  <source>Not available</source>
-  <target>不可用</target>
-  <note from="lit-localize">The fallback title of a form card when the title is not provided.</note>
-</trans-unit>
-<trans-unit id="account.profile.title">
-  <source>Profile</source>
-</trans-unit>
-<trans-unit id="account.profile.personal-info.title">
-  <source>Personal information</source>
-</trans-unit>
 <trans-unit id="general.title">
   <source>Title</source>
 </trans-unit>
@@ -22,9 +11,25 @@
 <trans-unit id="general.actions">
   <source>Actions</source>
 </trans-unit>
+<trans-unit id="account.profile.title">
+  <source>Profile</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.title">
+  <source>Personal information</source>
+</trans-unit>
 <trans-unit id="general.change">
   <source>Change</source>
 </trans-unit>
+<trans-unit id="general.update">
+  <source>Update</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.update-name">
+  <source>Update name</source>
+</trans-unit>
+<trans-unit id="general.fallback-title">
+  <source>Not set</source>
+  <note from="lit-localize">A fallback title when the title or heading of a component is not provided.</note>
+</trans-unit>
 <trans-unit id="account.profile.personal-info.avatar">
   <source>Avatar</source>
   <note from="lit-localize">The avatar of the user.</note>
@@ -33,6 +38,10 @@
   <source>Name</source>
   <note from="lit-localize">The name of the user.</note>
 </trans-unit>
+<trans-unit id="account.profile.personal-info.name-placeholder">
+  <source>Person Doe</source>
+  <note from="lit-localize">The placeholder for the name input field.</note>
+</trans-unit>
 </body>
 </file>
 </xliff>

packages/elements/xliff/zh-TW.xlf

@@ -2,17 +2,6 @@
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
 <file target-language="zh-TW" source-language="en" original="lit-localize-inputs" datatype="plaintext">
 <body>
-<trans-unit id="form-card.fallback-title">
-  <source>Not available</source>
-  <target>不可用</target>
-  <note from="lit-localize">The fallback title of a form card when the title is not provided.</note>
-</trans-unit>
-<trans-unit id="account.profile.title">
-  <source>Profile</source>
-</trans-unit>
-<trans-unit id="account.profile.personal-info.title">
-  <source>Personal information</source>
-</trans-unit>
 <trans-unit id="general.title">
   <source>Title</source>
 </trans-unit>
@@ -22,9 +11,25 @@
 <trans-unit id="general.actions">
   <source>Actions</source>
 </trans-unit>
+<trans-unit id="account.profile.title">
+  <source>Profile</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.title">
+  <source>Personal information</source>
+</trans-unit>
 <trans-unit id="general.change">
   <source>Change</source>
 </trans-unit>
+<trans-unit id="general.update">
+  <source>Update</source>
+</trans-unit>
+<trans-unit id="account.profile.personal-info.update-name">
+  <source>Update name</source>
+</trans-unit>
+<trans-unit id="general.fallback-title">
+  <source>Not set</source>
+  <note from="lit-localize">A fallback title when the title or heading of a component is not provided.</note>
+</trans-unit>
 <trans-unit id="account.profile.personal-info.avatar">
   <source>Avatar</source>
   <note from="lit-localize">The avatar of the user.</note>
@@ -33,6 +38,10 @@
   <source>Name</source>
   <note from="lit-localize">The name of the user.</note>
 </trans-unit>
+<trans-unit id="account.profile.personal-info.name-placeholder">
+  <source>Person Doe</source>
+  <note from="lit-localize">The placeholder for the name input field.</note>
+</trans-unit>
 </body>
 </file>
 </xliff>

pnpm-lock.yaml

@@ -3560,6 +3560,9 @@ importers:
 
   packages/elements:
     dependencies:
+      '@lit/context':
+        specifier: ^1.1.2
+        version: 1.1.2
       '@lit/localize':
         specifier: ^0.12.1
         version: 0.12.1
@@ -3582,6 +3585,9 @@ importers:
       '@silverhand/ts-config':
         specifier: 6.0.0
         version: 6.0.0(typescript@5.5.3)
+      '@types/node':
+        specifier: ^20.9.5
+        version: 20.12.7
       '@web/dev-server':
         specifier: ^0.4.6
         version: 0.4.6
@@ -5374,6 +5380,9 @@ packages:
   '@lit-labs/ssr-dom-shim@1.2.0':
     resolution: {integrity: sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g==}
 
+  '@lit/context@1.1.2':
+    resolution: {integrity: sha512-S0nw2C6Tkm7fVX5TGYqeROGD+Z9Coa2iFpW+ysYBDH3YvCqOY3wVQvSgwbaliLJkjTnSEYCBe9qFqKV8WUFpVw==}
+
   '@lit/localize-tools@0.7.2':
     resolution: {integrity: sha512-d5tehVao3Hz1DlTq6jy7TUYrCeyFi/E4BkzWr8MuAMjIM8aoKCR9s3cUw6m++8ZIiqGm2z7+6aHaPc/p1FGHyA==}
     hasBin: true
@@ -15406,6 +15415,10 @@ snapshots:
 
   '@lit-labs/ssr-dom-shim@1.2.0': {}
 
+  '@lit/context@1.1.2':
+    dependencies:
+      '@lit/reactive-element': 2.0.4
+
   '@lit/localize-tools@0.7.2':
     dependencies:
       '@lit/localize': 0.12.1