From 6b81391c3e4416889daa5627526dc0194f2f5f56 Mon Sep 17 00:00:00 2001
From: Westbrook Johnson <westbrook.johnson@gmail.com>
Date: Wed, 29 Mar 2023 13:39:49 -0400
Subject: [PATCH] fix(theme): stop language resolution propagation and demo
 using local languages

---
 .../stories/number-field.stories.ts           | 25 +++++++++++++++++++
 tools/theme/src/Theme.ts                      |  1 +
 2 files changed, 26 insertions(+)

diff --git a/packages/number-field/stories/number-field.stories.ts b/packages/number-field/stories/number-field.stories.ts
index d91e88fc86..8115d93e64 100644
--- a/packages/number-field/stories/number-field.stories.ts
+++ b/packages/number-field/stories/number-field.stories.ts
@@ -255,6 +255,31 @@ decimals.args = {
     value: 19.274,
 };
 
+export const germanDecimals = (args: StoryArgs): TemplateResult => {
+    return html`
+        <sp-field-label for="decimals">
+            Enter a number with visible decimals
+        </sp-field-label>
+        <sp-theme lang="de">
+            <sp-number-field
+                id="decimals"
+                style="width: 200px"
+                ...=${spreadProps(args)}
+                @change=${args.onChange}
+                .formatOptions=${{
+                    signDisplay: 'exceptZero',
+                    minimumFractionDigits: 1,
+                    maximumFractionDigits: 2,
+                } as unknown as Intl.NumberFormatOptions}
+            ></sp-number-field>
+        </sp-theme>
+    `;
+};
+
+germanDecimals.args = {
+    value: 19.274,
+};
+
 export const percents = (args: StoryArgs = {}): TemplateResult => {
     return html`
         <sp-field-label for="percents">Enter a percentage</sp-field-label>
diff --git a/tools/theme/src/Theme.ts b/tools/theme/src/Theme.ts
index abd9548377..39bb10e054 100644
--- a/tools/theme/src/Theme.ts
+++ b/tools/theme/src/Theme.ts
@@ -523,6 +523,7 @@ export class Theme extends HTMLElement implements ThemeKindProvider {
     }
 
     private _handleContextPresence(event: CustomEvent<ProvideLang>): void {
+        event.stopPropagation();
         const target = event.composedPath()[0] as HTMLElement;
         if (this._contextConsumers.has(target)) {
             return;