@pure-ds/core 0.7.38 → 0.7.39

package/custom-elements.json

@@ -1405,7 +1405,6 @@
               "type": {
                 "text": "string"
               },
-              "default": "\"Submit\"",
               "attribute": "submit-label"
             },
             {
@@ -1415,7 +1414,6 @@
               "type": {
                 "text": "string"
               },
-              "default": "\"Reset\"",
               "attribute": "reset-label"
             },
             {
@@ -1543,7 +1541,6 @@
               "type": {
                 "text": "string"
               },
-              "default": "\"Submit\"",
               "fieldName": "submitLabel"
             },
             {
@@ -1551,7 +1548,6 @@
               "type": {
                 "text": "string"
               },
-              "default": "\"Reset\"",
               "fieldName": "resetLabel"
             },
             {
@@ -2812,6 +2808,83 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "public/assets/pds/components/pds-locale.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Locale switcher component.\r\n\r\nThe component only persists canonical 5-letter locale tags (`xx-YY`),\r\nfor example `en-US` and `nl-NL`.",
+          "name": "PdsLocale",
+          "members": [
+            {
+              "kind": "method",
+              "name": "whenReady",
+              "description": "Resolves once the first availability check is complete.",
+              "return": {
+                "type": {
+                  "text": "Promise<boolean>"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "available",
+              "description": "Whether locale switching is currently available.",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "refresh",
+              "description": "Re-detect available locales and re-render.",
+              "return": {
+                "type": {
+                  "text": "Promise<boolean>"
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "pds-locale:ready",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Emitted after locale availability is resolved."
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "Accessible label for the locale radio group.",
+              "name": "data-label"
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "pds-locale",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "pds-locale",
+          "declaration": {
+            "name": "PdsLocale",
+            "module": "public/assets/pds/components/pds-locale.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "public/assets/pds/components/pds-omnibox.js",

package/dist/types/public/assets/pds/components/pds-locale.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Payload for `pds:locale:changed`.
+ */
+export type PdsLocaleChangedDetail = {
+    /**
+     * Canonical 5-letter locale tag (`xx-YY`).
+     */
+    locale: string;
+};
+//# sourceMappingURL=pds-locale.d.ts.map

package/dist/types/public/assets/pds/components/pds-locale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-locale.d.ts","sourceRoot":"","sources":["../../../../../../public/assets/pds/components/pds-locale.js"],"names":[],"mappings":";;;;;;;YAyec,MAAM"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pure-ds/core",
   "shortname": "pds",
-  "version": "0.7.38",
+  "version": "0.7.39",
   "description": "Why develop a Design System when you can generate one?",
   "repository": {
     "type": "git",

package/public/assets/pds/components/pds-live-edit.js

@@ -1631,475 +1631,27 @@ function setStoredConfig(nextConfig) {
   } catch (e) {}
 }
 
-function normalizeLocaleTag(locale) {
-  return String(locale || "").trim().toLowerCase();
-}
-
-let __startupLocalizationLocales = null;
-let __startupLocalizationLocalesPromise = null;
-
-const LOCALE_PROBE_CANDIDATES = [
-  "en", "nl", "de", "fr", "es", "it", "pt", "sv", "no", "da", "fi",
-  "pl", "cs", "sk", "sl", "hu", "ro", "bg", "hr", "sr", "ru", "uk",
-  "tr", "el", "he", "ar", "fa", "hi", "ja", "ko", "zh", "zh-cn", "zh-tw",
-];
-
-function toBaseLocale(locale) {
-  const normalized = normalizeLocaleTag(locale);
-  if (!normalized) return "";
-  return normalized.split("-")[0] || normalized;
-}
-
-function isLocalizationActive() {
-  const configLocalization =
-    PDS?.currentConfig?.localization && typeof PDS.currentConfig.localization === "object"
-      ? PDS.currentConfig.localization
-      : null;
-
-  const runtimeState =
-    typeof PDS?.getLocalizationState === "function"
-      ? PDS.getLocalizationState()
-      : null;
-
-  const hasRuntimeProvider = Boolean(runtimeState?.hasProvider);
-
-  const hasConfigProvider = Boolean(
-    configLocalization?.provider ||
-      typeof configLocalization?.translate === "function" ||
-      typeof configLocalization?.loadLocale === "function" ||
-      typeof configLocalization?.setLocale === "function"
-  );
-
-  const hasConfigMessages = Boolean(
-    configLocalization?.messages &&
-      typeof configLocalization.messages === "object" &&
-      Object.keys(configLocalization.messages).length > 0
-  );
-
-  const hasRuntimeMessages = Boolean(
-    runtimeState?.messages &&
-      typeof runtimeState.messages === "object" &&
-      Object.keys(runtimeState.messages).length > 0
-  );
-
-  return hasRuntimeProvider || hasConfigProvider || hasConfigMessages || hasRuntimeMessages;
-}
-
-function isLocaleBundle(bundle) {
-  if (!bundle || typeof bundle !== "object" || Array.isArray(bundle)) {
-    return false;
-  }
-
-  return Object.values(bundle).some((value) => {
-    if (typeof value === "string") return true;
-    return Boolean(value && typeof value === "object" && typeof value.content === "string");
-  });
-}
-
-function normalizeMessageBundle(bundle) {
-  if (!bundle || typeof bundle !== "object" || Array.isArray(bundle)) {
-    return {};
-  }
-
-  const normalized = {};
-  Object.entries(bundle).forEach(([key, value]) => {
-    if (typeof value === "string") {
-      normalized[key] = value;
-      return;
-    }
-
-    if (value && typeof value === "object" && typeof value.content === "string") {
-      normalized[key] = value.content;
-    }
-  });
-
-  return normalized;
-}
-
-function getLocalizationProviderLoader(configLocalization) {
-  if (!configLocalization || typeof configLocalization !== "object") return null;
-
-  return (
-    (typeof configLocalization?.loadLocale === "function"
-      ? configLocalization.loadLocale
-      : null) ||
-    (typeof configLocalization?.provider?.loadLocale === "function"
-      ? configLocalization.provider.loadLocale
-      : null) ||
-    (typeof configLocalization?.setLocale === "function"
-      ? configLocalization.setLocale
-      : null) ||
-    (typeof configLocalization?.provider?.setLocale === "function"
-      ? configLocalization.provider.setLocale
-      : null)
-  );
-}
-
-function buildLocaleProbeList({ defaultLocale, runtimeState, knownLocales }) {
-  const candidates = new Set();
-
-  const normalizedDefault = normalizeLocaleTag(defaultLocale);
-  if (normalizedDefault) {
-    candidates.add(normalizedDefault);
-  }
-
-  if (Array.isArray(runtimeState?.loadedLocales)) {
-    runtimeState.loadedLocales.forEach((locale) => {
-      const normalized = normalizeLocaleTag(locale);
-      if (normalized) {
-        candidates.add(normalized);
-        candidates.add(toBaseLocale(normalized));
-      }
-    });
-  }
-
-  if (Array.isArray(knownLocales)) {
-    knownLocales.forEach((locale) => {
-      const normalized = normalizeLocaleTag(locale);
-      if (normalized) {
-        candidates.add(normalized);
-        candidates.add(toBaseLocale(normalized));
-      }
-    });
-  }
-
-  if (typeof navigator !== "undefined" && Array.isArray(navigator.languages)) {
-    navigator.languages.forEach((locale) => {
-      const normalized = normalizeLocaleTag(locale);
-      if (normalized) {
-        candidates.add(normalized);
-        candidates.add(toBaseLocale(normalized));
-      }
-    });
-  }
-
-  LOCALE_PROBE_CANDIDATES.forEach((locale) => {
-    const normalized = normalizeLocaleTag(locale);
-    if (normalized) {
-      candidates.add(normalized);
-      candidates.add(toBaseLocale(normalized));
-    }
-  });
-
-  candidates.delete("");
-  return Array.from(candidates).sort((a, b) => a.localeCompare(b));
-}
-
-function bundlesDifferFromOrigin(originBundle, candidateBundle) {
-  const originEntries = normalizeMessageBundle(originBundle);
-  const candidateEntries = normalizeMessageBundle(candidateBundle);
-
-  const originKeys = Object.keys(originEntries);
-  const candidateKeys = Object.keys(candidateEntries);
-  if (!originKeys.length || !candidateKeys.length) {
-    return false;
-  }
-
-  return originKeys.some((key) => {
-    if (!Object.prototype.hasOwnProperty.call(candidateEntries, key)) return false;
-    return String(candidateEntries[key]) !== String(originEntries[key]);
-  });
-}
-
-function collectLocalesFromMessageRows(source, locales) {
-  if (!source || typeof source !== "object" || Array.isArray(source)) return;
-
-  Object.values(source).forEach((row) => {
-    if (!row || typeof row !== "object" || Array.isArray(row)) return;
-    if (typeof row.content === "string") return;
-
-    Object.entries(row).forEach(([localeKey, translatedValue]) => {
-      const normalized = normalizeLocaleTag(localeKey);
-      if (!normalized) return;
-
-      const hasValue =
-        typeof translatedValue === "string" ||
-        Boolean(
-          translatedValue &&
-            typeof translatedValue === "object" &&
-            typeof translatedValue.content === "string"
-        );
-
-      if (hasValue) {
-        locales.add(normalized);
-      }
-    });
-  });
-}
-
-function collectLocalesFromLocaleBundles(source, locales) {
-  if (!source || typeof source !== "object" || Array.isArray(source)) return;
-
-  Object.entries(source).forEach(([localeKey, bundle]) => {
-    const normalized = normalizeLocaleTag(localeKey);
-    if (!normalized) return;
-    if (!isLocaleBundle(bundle)) return;
-    locales.add(normalized);
-  });
-}
-
-function collectLocalesFromConfiguredList(source, locales) {
-  if (!Array.isArray(source)) return;
-
-  source.forEach((localeValue) => {
-    const normalized = normalizeLocaleTag(localeValue);
-    if (normalized) {
-      locales.add(normalized);
-    }
-  });
-}
-
-async function detectStartupLocalizationLocales() {
-  const locales = new Set();
-
-  const configLocalization =
-    PDS?.currentConfig?.localization && typeof PDS.currentConfig.localization === "object"
-      ? PDS.currentConfig.localization
-      : null;
-
-  const defaultLocale = normalizeLocaleTag(configLocalization?.locale);
-  if (defaultLocale) {
-    locales.add(defaultLocale);
-  }
-
-  collectLocalesFromConfiguredList(configLocalization?.locales, locales);
-  collectLocalesFromConfiguredList(configLocalization?.provider?.locales, locales);
-
-  if (locales.size >= 2) {
-    return Array.from(locales).sort((a, b) => a.localeCompare(b));
-  }
-
-  const runtimeState =
-    typeof PDS?.getLocalizationState === "function"
-      ? PDS.getLocalizationState()
-      : null;
-  const runtimeDefaultLocale = normalizeLocaleTag(runtimeState?.locale);
-  if (runtimeDefaultLocale) {
-    locales.add(runtimeDefaultLocale);
-  }
-
-  const messageSources = [
-    configLocalization?.messages,
-    configLocalization?.messagesByLocale,
-    configLocalization?.i18n,
-    configLocalization?.translations,
-    configLocalization?.provider?.messages,
-    configLocalization?.provider?.messagesByLocale,
-    configLocalization?.provider?.i18n,
-    configLocalization?.provider?.translations,
-  ];
-
-  messageSources.forEach((source) => {
-    collectLocalesFromMessageRows(source, locales);
-    collectLocalesFromLocaleBundles(source, locales);
-  });
-
-  const localeListFromRows = Array.from(locales).sort((a, b) => a.localeCompare(b));
-  if (localeListFromRows.length >= 2) {
-    return localeListFromRows;
-  }
-
-  const providerLoader = getLocalizationProviderLoader(configLocalization);
-  const runtimeLoadLocale =
-    typeof PDS?.loadLocale === "function" ? PDS.loadLocale.bind(PDS) : null;
-
-  if (typeof providerLoader !== "function" && typeof runtimeLoadLocale !== "function") {
-    return localeListFromRows;
-  }
-
-  const originLocale =
-    normalizeLocaleTag(configLocalization?.locale) ||
-    normalizeLocaleTag(runtimeState?.locale) ||
-    "en";
-
-  locales.add(originLocale);
-
-  let originBundle = normalizeMessageBundle(runtimeState?.messages || configLocalization?.messages);
-  if (!Object.keys(originBundle).length) {
-    try {
-      let loadedOrigin = null;
-
-      if (typeof runtimeLoadLocale === "function") {
-        loadedOrigin = await Promise.resolve(runtimeLoadLocale(originLocale));
-      } else {
-        loadedOrigin = await Promise.resolve(
-          providerLoader({
-            locale: originLocale,
-            defaultLocale: originLocale,
-            reason: "startup-locale-detect-origin",
-            loadedLocales: Array.from(locales),
-            messages: {},
-            load: true,
-          })
-        );
-      }
-
-      originBundle = normalizeMessageBundle(loadedOrigin);
-    } catch (error) {}
-  }
-
-  const probeLocales = buildLocaleProbeList({
-    defaultLocale: originLocale,
-    runtimeState,
-    knownLocales: Array.from(locales),
-  });
-
-  for (const candidateLocale of probeLocales) {
-    if (!candidateLocale || candidateLocale === originLocale) {
-      continue;
-    }
-
-    try {
-      let candidateBundle = null;
-
-      if (typeof runtimeLoadLocale === "function") {
-        candidateBundle = await Promise.resolve(runtimeLoadLocale(candidateLocale));
-      } else {
-        candidateBundle = await Promise.resolve(
-          providerLoader({
-            locale: candidateLocale,
-            defaultLocale: originLocale,
-            reason: "startup-locale-detect-probe",
-            loadedLocales: Array.from(locales),
-            messages: {},
-            load: true,
-          })
-        );
-      }
-
-      if (bundlesDifferFromOrigin(originBundle, candidateBundle)) {
-        locales.add(candidateLocale);
-        if (locales.size >= 2) {
-          break;
-        }
-      }
-    } catch (error) {}
-  }
-
-  return Array.from(locales).sort((a, b) => a.localeCompare(b));
-}
-
-async function getStartupLocalizationLocales() {
-  if (Array.isArray(__startupLocalizationLocales)) {
-    return [...__startupLocalizationLocales];
-  }
-
-  if (__startupLocalizationLocalesPromise) {
-    const inFlight = await __startupLocalizationLocalesPromise;
-    return [...inFlight];
-  }
-
-  __startupLocalizationLocalesPromise = detectStartupLocalizationLocales()
-    .then((locales) => {
-      __startupLocalizationLocales = Array.isArray(locales) ? locales : [];
-      return __startupLocalizationLocales;
-    })
-    .catch(() => {
-      __startupLocalizationLocales = [];
-      return __startupLocalizationLocales;
-    })
-    .finally(() => {
-      __startupLocalizationLocalesPromise = null;
-    });
-
-  const resolved = await __startupLocalizationLocalesPromise;
-  return [...resolved];
-}
-
-function localeOptionLabel(locale) {
-  const normalized = normalizeLocaleTag(locale);
-  if (!normalized) return "";
-
-  try {
-    const currentDocLang =
-      normalizeLocaleTag(document.documentElement?.getAttribute?.("lang")) || "en";
-    const displayNames = new Intl.DisplayNames([currentDocLang], {
-      type: "language",
-    });
-    const named = displayNames.of(normalized);
-    if (named && String(named).trim()) {
-      return named;
-    }
-  } catch (error) {}
-
-  return normalized;
-}
-
-function localeOptionAlias(locale) {
-  const normalized = normalizeLocaleTag(locale);
-  if (!normalized) return "";
-
-  const base = toBaseLocale(normalized);
-  if (!base) return normalized;
-  return base.slice(0, 2);
-}
-
-function localeMatches(selectedLocale, activeLocale) {
-  const selected = normalizeLocaleTag(selectedLocale);
-  const active = normalizeLocaleTag(activeLocale);
-  if (!selected || !active) return false;
-  return selected === active || toBaseLocale(selected) === toBaseLocale(active);
-}
-
 async function buildQuickLanguageSelector() {
   if (typeof document === "undefined") return null;
-  if (!isLocalizationActive()) return null;
-
-  const detectedLocales = await getStartupLocalizationLocales();
-  if (detectedLocales.length < 2) return null;
 
-  const languageGroup = document.createElement("div");
+  const languageGroup = document.createElement("label");
   languageGroup.className = "stack-xs";
+  languageGroup.hidden = true;
 
   const languageText = document.createElement("span");
   languageText.setAttribute("data-label", "");
   languageText.textContent = msg("Language");
 
-  const languageFieldset = document.createElement("fieldset");
-  languageFieldset.setAttribute("role", "radiogroup");
-  languageFieldset.className = "buttons";
-
-  const activeDocumentLang =
-    normalizeLocaleTag(document.documentElement?.getAttribute?.("lang")) ||
-    detectedLocales[0];
-
-  const radioName = `pds-live-language-${Date.now()}`;
-
-  detectedLocales.forEach((locale) => {
-    const optionLabel = document.createElement("label");
-
-    const optionInput = document.createElement("input");
-    optionInput.type = "radio";
-    optionInput.name = radioName;
-    optionInput.value = locale;
-    optionInput.checked = localeMatches(locale, activeDocumentLang);
-
-    const optionText = document.createElement("span");
-    const fullLocaleLabel = localeOptionLabel(locale);
-    const localeAlias = localeOptionAlias(locale) || fullLocaleLabel;
-
-    optionText.textContent = localeAlias.toUpperCase();
-    if (fullLocaleLabel) {
-      optionLabel.title = fullLocaleLabel;
-      optionText.title = fullLocaleLabel;
-      optionInput.setAttribute("aria-label", `${fullLocaleLabel} (${localeAlias})`);
+  const localeSelector = document.createElement("pds-locale");
+  localeSelector.setAttribute("data-label", msg("Language"));
+  localeSelector.addEventListener(
+    "pds-locale:ready",
+    (event) => {
+      languageGroup.hidden = !Boolean(event?.detail?.available);
     }
+  );
 
-    optionLabel.append(optionInput, optionText);
-    languageFieldset.appendChild(optionLabel);
-  });
-
-  languageFieldset.addEventListener("change", (event) => {
-    const selected = event.target;
-    if (!(selected instanceof HTMLInputElement)) return;
-    if (selected.type !== "radio") return;
-
-    const nextLocale = normalizeLocaleTag(selected.value);
-    if (!nextLocale) return;
-    document.documentElement.setAttribute("lang", nextLocale);
-  });
-
-  languageGroup.append(languageText, languageFieldset);
+  languageGroup.append(languageText, localeSelector);
   return languageGroup;
 }