From b5b7b294ae08e0c842c4e8627cc9c2a0eda92ec3 Mon Sep 17 00:00:00 2001
From: Volker Schukai <volker.schukai@schukai.com>
Date: Sat, 4 Jan 2025 19:26:32 +0100
Subject: [PATCH] feat: new language control #276
---
.../accessibility/locale-picker.mjs | 598 ++++++++++++++++++
.../accessibility/style/locale-picker.css | 1 +
.../accessibility/style/locale-picker.pcss | 26 +
.../stylesheet/locale-picker.mjs | 31 +
4 files changed, 656 insertions(+)
create mode 100644 source/components/accessibility/locale-picker.mjs
create mode 100644 source/components/accessibility/style/locale-picker.css
create mode 100644 source/components/accessibility/style/locale-picker.pcss
create mode 100644 source/components/accessibility/stylesheet/locale-picker.mjs
diff --git a/source/components/accessibility/locale-picker.mjs b/source/components/accessibility/locale-picker.mjs
new file mode 100644
index 000000000..bf3d7caf9
--- /dev/null
+++ b/source/components/accessibility/locale-picker.mjs
@@ -0,0 +1,598 @@
+/**
+ * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
+ */
+
+import {instanceSymbol} from "../../constants.mjs";
+import {addAttributeToken} from "../../dom/attributes.mjs";
+import {
+ ATTRIBUTE_ERRORMESSAGE,
+ ATTRIBUTE_ROLE,
+} from "../../dom/constants.mjs";
+import {CustomControl} from "../../dom/customcontrol.mjs";
+import {CustomElement, updaterTransformerMethodsSymbol} from "../../dom/customelement.mjs";
+import {
+ assembleMethodSymbol,
+ registerCustomElement,
+} from "../../dom/customelement.mjs";
+import {findTargetElementFromEvent} from "../../dom/events.mjs";
+import {isFunction} from "../../types/is.mjs";
+import {LocalePickerStyleSheet} from "./stylesheet/locale-picker.mjs";
+import {fireCustomEvent} from "../../dom/events.mjs";
+import {detectUserLanguagePreference} from "../../i18n/util.mjs";
+import {Formatter} from "../../text/formatter.mjs";
+
+import "../form/button.mjs";
+import "../form/select.mjs";
+
+export {LocalePicker};
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const localePickerElementSymbol = Symbol("localePickerElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const otherLanguagesElementSymbol = Symbol("otherLanguagesElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const buttonLanguageElementSymbol = Symbol("buttonLanguageElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const buttonNoThanksElementSymbol = Symbol("buttonNoThanksElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const detectedLanguagesSymbol = Symbol("detectedLanguages");
+
+/**
+ * A LocalePicker
+ *
+ * @fragments /fragments/components/accessibility/locale-picker/
+ *
+ * @example /examples/components/accessibility//locale-picker-simple
+ *
+ * @issue https://localhost.alvine.dev:8443/development/issues/closed/276.html
+ *
+ * @since 3.97.0
+ * @copyright schukai GmbH
+ * @summary A beautiful LocalePicker that can make your life easier and also looks good.
+ */
+class LocalePicker extends CustomElement {
+ /**
+ * This method is called by the `instanceof` operator.
+ * @returns {symbol}
+ */
+ static get [instanceSymbol]() {
+ return Symbol.for(
+ "@schukai/monster/components/accessibility/locale-picker@@instance",
+ );
+ }
+
+ /**
+ *
+ * @return {Components.LocalePicker
+ */
+ [assembleMethodSymbol]() {
+ super[assembleMethodSymbol]();
+ initControlReferences.call(this);
+ initEventHandler.call(this);
+
+ return this;
+ }
+
+ /**
+ * To set the options via the HTML Tag, the attribute `data-monster-options` must be used.
+ * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+ *
+ * The individual configuration values can be found in the table.
+ *
+ * @property {Object} templates Template definitions
+ * @property {string} templates.main Main template
+ * @property {Object} labels Label definitions
+ * @property {Object} actions Callbacks
+ * @property {string} actions.click="throw Error" Callback when clicked
+ * @property {Object} features Features
+ * @property {boolean} features.removeOnSelected=false Remove the element when a language is selected
+ * @property {Object} classes CSS classes
+ * @property {boolean} disabled=false Disabled state
+ */
+ get defaults() {
+ return Object.assign({}, super.defaults, {
+ templates: {
+ main: getTemplate(),
+ },
+ labels: {
+ "headline": "Welcome to our Website",
+ "text": "This page is currently displayed in ${currentLabel}. However, we also offer this page in your preferred language. Would you like to switch?",
+ "button-label": "Switch to ${preferred.label}",
+ "button-no-thanks": "No, thanks",
+ "headline-other": "Other languages",
+ },
+ classes: {},
+ disabled: false,
+ features: {
+ removeOnSelected: false,
+ },
+ actions: {
+ click: () => {
+ throw new Error("the click action is not defined");
+ },
+ },
+ });
+ }
+
+ /**
+ * Private method that provides a mapping of transformer methods keyed by their names.
+ * These transformer methods define custom transformations for given input values.
+ *
+ * @returns {Object} An object containing transformer methods. Each method is keyed by its name.
+ * The provided transformer "my-transformer" processes an input value based on its type:
+ * - Appends "!" if the value is a string.
+ * - Increments the value by 1 if the type is "Zahl".
+ * - Returns the value unchanged for other types.
+ */
+ [updaterTransformerMethodsSymbol]() {
+ return {
+ "replace-placeholder": (value) => {
+ const formatter = new Formatter(this[detectedLanguagesSymbol])
+ return formatter.format(value);
+
+ }
+ };
+ };
+
+
+ /**
+ * Lifecycle method that is called when the custom element is appended into a document-connected element.
+ * Invokes the parent class's connectedCallback method and retrieves the user's preferred language.
+ * Logs the preferred language to the console.
+ *
+ * @return {void} This method does not return a value.
+ */
+ connectedCallback() {
+ super.connectedCallback();
+
+ this[detectedLanguagesSymbol] = detectUserLanguagePreference();
+
+ const stored = localStorage.getItem(buildStorageKey.call(this));
+ if (stored) {
+ if (this.getOption("features.removeOnSelected")) {
+ this.remove();
+ }
+ return;
+ }
+
+ this.style.display = "block";
+
+ if (this[otherLanguagesElementSymbol] instanceof HTMLElement &&
+ this[detectedLanguagesSymbol].offerable &&
+ this[detectedLanguagesSymbol].offerable.length > 1) {
+ this[otherLanguagesElementSymbol].classList.remove("hidden");
+ this[otherLanguagesElementSymbol].setOption('mapping.labelTemplate', '${label}')
+ this[otherLanguagesElementSymbol].setOption('mapping.valueTemplate', '${href}')
+ this[otherLanguagesElementSymbol].importOptions(this[detectedLanguagesSymbol]?.offerable || []);
+ }
+
+ const translations = getTranslation(this[detectedLanguagesSymbol].offerable[0].baseLang);
+ this.setOption('labels', translations.labels);
+ if (this[otherLanguagesElementSymbol]) {
+ this[otherLanguagesElementSymbol].setOption('labels.select-an-option', translations.selectAnOption);
+ }
+
+ }
+
+ /**
+ * Resets the locale picker by removing the stored value from the local storage.
+ *
+ * @returns {LocalePicker}
+ */
+ reset() {
+ localStorage.removeItem(buildStorageKey.call(this));
+ return this;
+ }
+
+ /**
+ * @return {string}
+ */
+ static getTag() {
+ return "monster-locale-picker";
+ }
+
+ /**
+ * @return {CSSStyleSheet[]}
+ */
+ static getCSSStyleSheet() {
+ return [LocalePickerStyleSheet];
+ }
+}
+
+/**
+ * @private
+ * @return {initEventHandler}
+ */
+function initEventHandler() {
+ const self = this;
+ const element = this[localePickerElementSymbol];
+
+ const type = "click";
+
+ element.addEventListener(type, function (event) {
+ const callback = self.getOption("actions.click");
+
+ fireCustomEvent(self, "monster-locale-picker-clicked", {
+ element: self,
+ });
+
+ if (!isFunction(callback)) {
+ return;
+ }
+
+ const element = findTargetElementFromEvent(
+ event,
+ ATTRIBUTE_ROLE,
+ "control",
+ );
+
+ if (!(element instanceof Node && self.hasNode(element))) {
+ return;
+ }
+
+ callback.call(self, event);
+ });
+
+ this[buttonNoThanksElementSymbol].setOption('actions.click', () => {
+ localStorage.setItem(buildStorageKey.call(this), "1");
+ this.style.display = "none";
+ if (this.getOption("features.removeOnSelected")) {
+ this.remove();
+ }
+ });
+
+ this[buttonLanguageElementSymbol].setOption('actions.click', () => {
+ localStorage.setItem(buildStorageKey.call(this), "1");
+ window.location.href = this[detectedLanguagesSymbol].offerable[0].href;
+ });
+
+ this[otherLanguagesElementSymbol].addEventListener('change', (event) => {
+ const element = findTargetElementFromEvent(
+ event,
+ ATTRIBUTE_ROLE,
+ "other-languages",
+ );
+
+ if (element) {
+ const selected = element.value;
+ if (selected) {
+ localStorage.setItem(buildStorageKey.call(this), "1");
+ window.location.href = selected;
+ }
+ }
+
+ })
+
+ return this;
+}
+
+/**
+ * @private
+ * @returns {string}
+ */
+function buildStorageKey() {
+ return 'locale-picker-' + this[detectedLanguagesSymbol].current;
+}
+
+/**
+ * @private
+ * @param lang
+ * @returns {Object}
+ */
+function getTranslation(lang) {
+ const map = {
+ "en": {
+ "headline": "Welcome to our Website",
+ "text": "This page is currently displayed in ${currentLabel}. However, we also offer this page in your preferred language. Would you like to switch?",
+ "button-label": "Switch to ${preferred.label}",
+ "button-no-thanks": "No, thanks",
+ "headline-other": "Other languages"
+ },
+ "de": {
+ "headline": "Willkommen auf unserer Webseite",
+ "text": "Diese Seite wird aktuell auf ${currentLabel} angezeigt. Wir bieten jedoch auch diese Seite in Ihrer bevorzugten Sprache an. Möchten Sie wechseln?",
+ "button-label": "Wechseln zu ${preferred.label}",
+ "button-no-thanks": "Nein, danke",
+ "headline-other": "Andere Sprachen"
+ },
+ "fr": {
+ "headline": "Bienvenue sur notre site web",
+ "text": "Cette page est actuellement affichée en ${currentLabel}. Cependant, nous proposons également cette page dans votre langue préférée. Souhaitez-vous changer?",
+ "button-label": "Changer pour ${preferred.label}",
+ "button-no-thanks": "Non, merci",
+ "headline-other": "Autres langues"
+ },
+ "es": {
+ "headline": "Bienvenido a nuestro sitio web",
+ "text": "Esta página se muestra actualmente en ${currentLabel}. Sin embargo, también ofrecemos esta página en su idioma preferido. ¿Le gustaría cambiar?",
+ "button-label": "Cambiar a ${preferred.label}",
+ "button-no-thanks": "No, gracias",
+ "headline-other": "Otros idiomas"
+ },
+ "it": {
+ "headline": "Benvenuti sul nostro sito web",
+ "text": "Questa pagina è attualmente visualizzata in ${currentLabel}. Tuttavia, offriamo anche questa pagina nella tua lingua preferita. Vuoi cambiare?",
+ "button-label": "Cambia nella ${preferred.label}",
+ "button-no-thanks": "No, grazie",
+ "headline-other": "Altre lingue"
+ },
+ "pt": {
+ "headline": "Bem-vindo ao nosso site",
+ "text": "Esta página está atualmente exibida em ${currentLabel}. No entanto, também oferecemos esta página no seu idioma preferido. Gostaria de mudar?",
+ "button-label": "Mudar para ${preferred.label}",
+ "button-no-thanks": "Não, obrigado",
+ "headline-other": "Outros idiomas"
+ },
+ "nl": {
+ "headline": "Welkom op onze website",
+ "text": "Deze pagina wordt momenteel weergegeven in ${currentLabel}. We bieden deze pagina echter ook aan in uw voorkeurstaal. Wilt u overschakelen?",
+ "button-label": "Overschakelen naar ${preferred.label}",
+ "button-no-thanks": "Nee, bedankt",
+ "headline-other": "Andere talen"
+ },
+ "pl": {
+ "headline": "Witamy na naszej stronie",
+ "text": "Ta strona jest obecnie wyświetlana po ${currentLabel}. Oferujemy jednak również tę stronę w Twoim preferowanym języku. Czy chcesz przełączyć?",
+ "button-label": "Przełącz na ${preferred.label}",
+ "button-no-thanks": "Nie, dziękuję",
+ "headline-other": "Inne języki"
+ },
+ "ru": {
+ "headline": "Добро пожаловать на наш сайт",
+ "text": "Эта страница в настоящее время отображается на ${currentLabel}. Однако мы также предлагаем эту страницу на вашем предпочтительном языке. Хотите переключиться?",
+ "button-label": "Переключиться на ${preferred.label}",
+ "button-no-thanks": "Нет, спасибо",
+ "headline-other": "Другие языки"
+ },
+ "cs": {
+ "headline": "Vítejte na našem webu",
+ "text": "Tato stránka je aktuálně zobrazena v ${currentLabel}. Nabízíme však tuto stránku také ve vašem preferovaném jazyce. Chcete přejít?",
+ "button-label": "Přejít na ${preferred.label}",
+ "button-no-thanks": "Ne, děkuji",
+ "headline-other": "Další jazyky"
+ },
+ "sk": {
+ "headline": "Vitajte na našej webovej stránke",
+ "text": "Táto stránka je v súčasnosti zobrazená v ${currentLabel}. Ponúkame však túto stránku aj vo vašom preferovanom jazyku. Chcete prejsť?",
+ "button-label": "Prepnúť na ${preferred.label}",
+ "button-no-thanks": "Nie, ďakujem",
+ "headline-other": "Iné jazyky"
+ },
+
+
+ "bg": {
+ "headline": "Добре дошли на нашия уебсайт",
+ "text": "Тази страница в момента се показва на ${currentLabel}. Въпреки това, предлагаме също тази страница на Вашия предпочитан език. Желаете ли да превключите?",
+ "button-label": "Превключете на ${preferred.label}",
+ "button-no-thanks": "Не, благодаря",
+ "headline-other": "Други езици"
+ },
+ "hr": {
+ "headline": "Dobrodošli na našu web stranicu",
+ "text": "Ova stranica trenutno je prikazana na ${currentLabel}. Međutim, nudimo i ovu stranicu na vašem preferiranom jeziku. Želite li prebaciti?",
+ "button-label": "Prebaci na ${preferred.label}",
+ "button-no-thanks": "Ne, hvala",
+ "headline-other": "Drugi jezici"
+ },
+ "fi": {
+ "headline": "Tervetuloa verkkosivustollemme",
+ "text": "Tämä sivu on tällä hetkellä näkyvissä ${currentLabel}. Tarjoamme kuitenkin tätä sivua myös suosimallasi kielellä. Haluaisitko vaihtaa?",
+ "button-label": "Vaihda ${preferred.label}",
+ "button-no-thanks": "Ei kiitos",
+ "headline-other": "Muut kielet"
+ },
+ "sv": {
+ "headline": "Välkommen till vår webbplats",
+ "text": "Denna sida visas för närvarande på ${currentLabel}. Vi erbjuder dock även denna sida på ditt föredragna språk. Skulle du vilja byta?",
+ "button-label": "Byt till ${preferred.label}",
+ "button-no-thanks": "Nej tack",
+ "headline-other": "Andra språk"
+ },
+ "el": {
+ "headline": "Καλώς ήρθατε στην ιστοσελίδα μας",
+ "text": "Αυτή η σελίδα εμφανίζεται προς το παρόν στα ${currentLabel}. Ωστόσο, προσφέρουμε επίσης αυτή τη σελίδα στην προτιμώμενη γλώσσα σας. Θα θέλατε να αλλάξετε;",
+ "button-label": "Αλλαγή σε ${preferred.label}",
+ "button-no-thanks": "Όχι, ευχαριστώ",
+ "headline-other": "Άλλες γλώσσες"
+ },
+ "hu": {
+ "headline": "Üdvözöljük weboldalunkon",
+ "text": "Ez az oldal jelenleg ${currentLabel} nyelven jelenik meg. Azonban kínáljuk ezt az oldalt a preferált nyelvén is. Szeretne váltani?",
+ "button-label": "Váltás ${preferred.label} nyelvre",
+ "button-no-thanks": "Nem, köszönöm",
+ "headline-other": "További nyelvek"
+ },
+ "ro": {
+ "headline": "Bine ați venit pe site-ul nostru",
+ "text": "Această pagină este afișată în prezent în ${currentLabel}. Totuși, oferim de asemenea această pagină în limba dumneavoastră preferată. Doriți să schimbați?",
+ "button-label": "Schimbați în ${preferred.label}",
+ "button-no-thanks": "Nu, mulțumesc",
+ "headline-other": "Alte limbi"
+ },
+ "da": {
+ "headline": "Velkommen til vores hjemmeside",
+ "text": "Denne side vises i øjeblikket på ${currentLabel}. Vi tilbyder dog også denne side på dit foretrukne sprog. Vil du skifte?",
+ "button-label": "Skift til ${preferred.label}",
+ "button-no-thanks": "Nej tak",
+ "headline-other": "Andre sprog"
+ },
+ "no": {
+ "headline": "Velkommen til vår nettside",
+ "text": "Denne siden vises for øyeblikket på ${currentLabel}. Vi tilbyr imidlertid også denne siden på ditt foretrukne språk. Ønsker du å bytte?",
+ "button-label": "Bytt til ${preferred.label}",
+ "button-no-thanks": "Nei, takk",
+ "headline-other": "Andre språk"
+ },
+ "hi": {
+ "headline": "हमारी वेबसाइट पर आपका स्वागत है",
+ "text": "यह पृष्ठ वर्तमान में ${currentLabel} में प्रदर्शित हो रहा है। हालांकि, हम इस पृष्ठ को आपकी पसंदीदा भाषा में भी प्रदान करते हैं। क्या आप स्विच करना चाहेंगे?",
+ "button-label": "${preferred.label} में स्विच करें",
+ "button-no-thanks": "नहीं, धन्यवाद",
+ "headline-other": "अन्य भाषाएँ"
+ },
+ "bn": {
+ "headline": "আমাদের ওয়েবসাইটে আপনাকে স্বাগতম",
+ "text": "এই পৃষ্ঠাটি বর্তমানে ${currentLabel} প্রদর্শিত হচ্ছে। তবে, আমরা এই পৃষ্ঠাটি আপনার পছন্দের ভাষায়ও অফার করি। আপনি কি সুইচ করতে চান?",
+ "button-label": "${preferred.label}-এ সুইচ করুন",
+ "button-no-thanks": "না, ধন্যবাদ",
+ "headline-other": "অন্যান্য ভাষাসমূহ"
+ },
+ "ta": {
+ "headline": "எங்கள் இணையதளத்திற்கு வருக",
+ "text": "இந்த பக்கம் தற்போது ${currentLabel} என்ற மொழியில் காட்சியளிக்கப்படுகிறது. எனினும், நாங்கள் இந்த பக்கத்தை உங்கள் விருப்ப மொழியிலும் வழங்குகிறோம். நீங்கள் மாற்ற விரும்புகிறீர்களா?",
+ "button-label": "${preferred.label}-க்கு மாற்றவும்",
+ "button-no-thanks": "இல்லை, நன்றி",
+ "headline-other": "மற்ற மொழிகள்"
+ },
+ "te": {
+ "headline": "మా వెబ్సైట్కు స్వాగతం",
+ "text": "ఈ పేజీ ప్రస్తుతం ${currentLabel}లో ప్రదర్శితం అవుతున్నది. అయితే, మేము ఈ పేజీని మీ ఇష్టపడే భాషలో కూడా అందిస్తున్నాము. మీరు మార్చాలనుకుంటున్నారా?",
+ "button-label": "${preferred.label}కి మార్చండి",
+ "button-no-thanks": "కాదు, ధన్యవాదాలు",
+ "headline-other": "ఇతర భాషలు"
+ },
+ "mr": {
+ "headline": "आपले आमच्या वेबसाइटवर स्वागत आहे",
+ "text": "हे पान सध्या ${currentLabel}मध्ये दाखविले जात आहे. परंतु, आम्ही हे पान आपल्या पसंतीच्या भाषेतही देत आहोत. आपण स्विच करू इच्छिता का?",
+ "button-label": "${preferred.label}मध्ये स्विच करा",
+ "button-no-thanks": "नाही, धन्यवाद",
+ "headline-other": "इतर भाषा"
+ },
+ "zh": {
+ "headline": "欢迎访问我们的网站",
+ "text": "本页面当前显示为${currentLabel}。然而，我们还提供您偏好的语言版本。您想切换吗？",
+ "button-label": "切换到${preferred.label}",
+ "button-no-thanks": "不，谢谢",
+ "headline-other": "其他语言"
+ },
+ "ja": {
+ "headline": "私たちのウェブサイトへようこそ",
+ "text": "このページは現在${currentLabel}で表示されています。しかし、私たちはあなたの好みの言語でこのページを提供しています。切り替えますか？",
+ "button-label": "${preferred.label}に切り替える",
+ "button-no-thanks": "いいえ、結構です",
+ "headline-other": "他の言語"
+ }
+ }
+
+ const selectAnOption = {
+ "en": "Select a language",
+ "de": "Wählen Sie eine Sprache",
+ "fr": "Sélectionnez une langue",
+ "es": "Seleccione un idioma",
+ "it": "Seleziona una lingua",
+ "pt": "Selecione um idioma",
+ "nl": "Selecteer een taal",
+ "pl": "Wybierz język",
+ "ru": "Выберите язык",
+ "cs": "Vyberte jazyk",
+ "sk": "Vyberte jazyk",
+ "bg": "Изберете език",
+ "hr": "Odaberite jezik",
+ "fi": "Valitse kieli",
+ "sv": "Välj ett språk",
+ "el": "Επιλέξτε γλώσσα",
+ "hu": "Válasszon egy nyelvet",
+ "ro": "Selectați o limbă",
+ "da": "Vælg et sprog",
+ "no": "Velg et språk",
+ "hi": "एक भाषा चुनें",
+ "bn": "একটি ভাষা নির্বাচন করুন",
+ "ta": "ஒரு மொழியைத் தேர்ந்தெடுக்கவும்",
+ "te": "భాషను ఎంచుకోండి",
+ "mr": "एक भाषा निवडा",
+ "zh": "选择一种语言",
+ "ja": "言語を選択してください"
+ };
+
+ const result = {}
+
+ if (map[lang]) {
+ result['labels'] = map[lang];
+ } else {
+ result['labels'] = map['en'];
+ }
+
+ if (selectAnOption[lang]) {
+ result['selectAnOption'] = selectAnOption[lang];
+ } else {
+ result['selectAnOption'] = selectAnOption['en'];
+ }
+
+ return result;
+
+
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function initControlReferences() {
+ this[localePickerElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="control"]`,
+ );
+
+ this[otherLanguagesElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="other-languages"]`
+ );
+
+ this[buttonNoThanksElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="button-no-thanks"]`
+ );
+
+ this[buttonLanguageElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="button-language"]`
+ );
+
+
+}
+
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+ // language=HTML
+ return `
+ <div data-monster-role="control" part="control">
+ <h2 data-monster-role="headline" part="headline" data-monster-replace="path:labels.headline"></h2>
+ <p data-monster-replace="path:labels.text | call:replace-placeholder"></p>
+ <div data-monster-role="container" part="container">
+ <monster-button data-monster-role="button-language"
+ data-monster-replace="path:labels.button-label | call:replace-placeholder"></monster-button>
+ <monster-button data-monster-role="button-no-thanks"
+ data-monster-replace="path:labels.button-no-thanks | call:replace-placeholder"></monster-button>
+ <monster-select class="hidden" data-monster-role="other-languages"></monster-select>
+ </div>
+ </div>`;
+}
+
+registerCustomElement(LocalePicker);
diff --git a/source/components/accessibility/style/locale-picker.css b/source/components/accessibility/style/locale-picker.css
new file mode 100644
index 000000000..5f5b7bb6d
--- /dev/null
+++ b/source/components/accessibility/style/locale-picker.css
@@ -0,0 +1 @@
+/** generated from locale-picker.pcss **/
diff --git a/source/components/accessibility/style/locale-picker.pcss b/source/components/accessibility/style/locale-picker.pcss
new file mode 100644
index 000000000..ccbda16f9
--- /dev/null
+++ b/source/components/accessibility/style/locale-picker.pcss
@@ -0,0 +1,26 @@
+@import "../../style/normalize.pcss";
+@import "../../style/display.pcss";
+@import "../../style/mixin/button.pcss";
+@import "../../style/button.pcss";
+@import "../../style/mixin/typography.pcss";
+@import "../../style/mixin/hover.pcss";
+@import "../../style/control.pcss";
+@import "../../style/property.pcss";
+@import "../../style/ripple.pcss";
+
+[data-monster-role=container] {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: auto auto;
+ gap: 0.3rem;
+}
+
+[data-monster-role=button-language],
+[data-monster-role=button-no-thanks] {
+ grid-row: 1;
+}
+
+[data-monster-role=other-languages] {
+ grid-column: 1 / -1;
+ grid-row: 2;
+}
\ No newline at end of file
diff --git a/source/components/accessibility/stylesheet/locale-picker.mjs b/source/components/accessibility/stylesheet/locale-picker.mjs
new file mode 100644
index 000000000..192a2f44c
--- /dev/null
+++ b/source/components/accessibility/stylesheet/locale-picker.mjs
@@ -0,0 +1,31 @@
+/**
+ * Copyright © schukai GmbH and all contributing authors, 2025. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
+ */
+
+import {addAttributeToken} from "../../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+
+export {LocalePickerStyleSheet}
+
+/**
+ * @private
+ * @type {CSSStyleSheet}
+ */
+const LocalePickerStyleSheet = new CSSStyleSheet();
+
+try {
+ LocalePickerStyleSheet.insertRule(`
+@layer localepicker {
+:where(html){line-height:1.15;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}html{height:100%}body,html{min-height:calc(100vh - 40px)}body{box-sizing:border-box;margin:0;padding:0;word-break:break-word}body:focus-visible{outline:none}:focus-visible{outline:none}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-button-primary,button{align-items:center;background-color:var(--monster-bg-color-primary-1);background-position:50%;border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);color:var(--monster-color-primary-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-primary{background-color:var(--monster-bg-color-primary-4);border-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-button-secondary{background-color:var(--monster-bg-color-primary-1);background-color:var(--monster-bg-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-primary-1);color:var(--monster-color-secondary-4)}.monster-button-secondary,.monster-button-tertiary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-tertiary{background-color:var(--monster-bg-color-primary-1);background-color:var(--monster-bg-color-tertiary-4);border-color:var(--monster-bg-color-tertiary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-primary-1);color:var(--monster-color-tertiary-4)}.monster-button-outline-primary{background-color:var(--monster-bg-color-primary-1);background-color:var(--monster-color-primary-4);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-primary-1);color:var(--monster-bg-color-primary-4)}.monster-button-outline-primary,.monster-button-outline-secondary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-outline-secondary{background-color:var(--monster-bg-color-primary-1);background-color:var(--monster-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-primary-1);color:var(--monster-bg-color-secondary-4)}.monster-button-outline-tertiary{align-items:center;background-color:var(--monster-bg-color-primary-1);background-color:var(--monster-color-tertiary-4);background-position:50%;border-color:var(--monster-bg-color-tertiary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);color:var(--monster-color-primary-1);color:var(--monster-bg-color-tertiary-4);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}button:active,button:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}button:active{z-index:var(--monster-z-index-outline)}.monster-button-bar,.monster-button-group{align-content:center;align-items:stretch;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.monster-button-group{box-sizing:border-box;gap:0;margin:1rem 0}.monster-button-group>:not(:last-child){margin-right:calc(var(--monster-border-width)*-1)}.monster-button-group :hover{box-shadow:none}button:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px;z-index:var(--monster-z-index-outline)}@media (prefers-color-scheme:light){button:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px;z-index:var(--monster-z-index-outline)}}[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045;--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}span.monster-fx-ripple{animation:monster-fx-ripple .6s linear;background-color:hsla(0,0%,100%,.7);border-radius:50%;position:absolute;transform:scale(0)}@keyframes monster-fx-ripple{to{opacity:0;transform:scale(4)}}[data-monster-role=container]{display:grid;gap:.3rem;grid-template-columns:1fr 1fr;grid-template-rows:auto auto}[data-monster-role=button-language],[data-monster-role=button-no-thanks]{grid-row:1}[data-monster-role=other-languages]{grid-column:1/-1;grid-row:2}
+}`, 0);
+} catch (e) {
+ addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+}
--
GitLab