@yuneta/gobj-ui 2.4.0 → 2.5.0

package/dist/gobj-ui.cjs.js

@@ -1562,7 +1562,7 @@ function yui_toolbar(attrs = {}, items = []) {
 *          The tabs in a content-layer to manage sub-containers can be managed by yui_tabs.js
 *          or be integrated in each gobj.
 *
-*          Copyright (c) 2025, ArtGins.
+*          Copyright (c) 2025-2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/
 /***************************************************************
@@ -2153,9 +2153,19 @@ console.log("GLOBAL callback");
 ************************************************************/
 function display_volatil_modal({ title, msg, callback, type, x_close, buttons }) {
 	const callback_ = callback;
+	let type_ = (type || "info").toLowerCase();
+	if (type_ === "danger") type_ = "error";
+	const TYPE_ICONS = {
+		"info": "yi-circle-info",
+		"question": "yi-question",
+		"success": "yi-square-check",
+		"warning": "yi-triangle-exclamation",
+		"error": "yi-circle-exclamation"
+	};
+	let icon = TYPE_ICONS[type_] || TYPE_ICONS["info"];
 	let $element = (0, _yuneta_gobj_js.createElement2)([
 		"div",
-		{ class: "modal" },
+		{ class: `modal yui-volatil is-${type_}` },
 		[[
 			"div",
 			{ class: "modal-background" },
@@ -2167,44 +2177,39 @@ function display_volatil_modal({ title, msg, callback, type, x_close, buttons })
 		]]
 	]);
 	const destroyModal = () => {
+		document.removeEventListener("keydown", on_keydown, true);
 		$element.classList.remove("is-active");
 		$element.parentNode.removeChild($element);
 	};
+	const on_keydown = (evt) => {
+		if (evt.key !== "Escape") return;
+		let $modals = document.querySelectorAll(".modal.is-active");
+		if ($modals.length && $modals[$modals.length - 1] !== $element) return;
+		evt.stopPropagation();
+		evt.preventDefault();
+		let $cancel = $element.querySelector(".cancelButton, .delete");
+		if ($cancel) $cancel.click();
+		else destroyModal();
+	};
+	document.addEventListener("keydown", on_keydown, true);
 	let $modal_card = $element.querySelector(".modal-card");
-	if (title || x_close) {
-		if (!type) type = "";
-		let background_color = "";
-		switch (type.toLowerCase()) {
-			case "info":
-				background_color = "has-background-info";
-				break;
-			case "success":
-				background_color = "has-background-success";
-				break;
-			case "warning":
-				background_color = "has-background-warning";
-				break;
-			case "error":
-			case "danger":
-				background_color = "has-background-danger";
-				break;
-		}
-		let title_ = !title ? [] : [
-			"p",
-			{ class: "modal-card-title has-text-centered" },
-			title
-		];
-		let x_close_ = !x_close ? [] : ["button", {
-			class: "delete is-large",
-			"aria-label": "close"
-		}];
-		let $header = (0, _yuneta_gobj_js.createElement2)([
-			"header",
-			{ class: `modal-card-head ${background_color} p-3` },
-			[title_, x_close_]
-		]);
-		$modal_card.appendChild($header);
-	}
+	$modal_card.appendChild((0, _yuneta_gobj_js.createElement2)([
+		"div",
+		{ class: "yui-volatil-icon" },
+		[["i", {
+			class: icon,
+			"aria-hidden": "true"
+		}]]
+	]));
+	if (title) $modal_card.appendChild((0, _yuneta_gobj_js.createElement2)([
+		"p",
+		{ class: "yui-volatil-title has-text-centered" },
+		title
+	]));
+	if (x_close) $modal_card.appendChild((0, _yuneta_gobj_js.createElement2)(["button", {
+		class: "delete yui-volatil-x",
+		"aria-label": "close"
+	}]));
 	let $section = (0, _yuneta_gobj_js.createElement2)([
 		"section",
 		{ class: "modal-card-body has-text-centered" },
@@ -2265,7 +2270,7 @@ function display_info_message(title, msg, callback) {
 		msg,
 		callback,
 		type: "info",
-		buttons: [{ content: `<button class="button is-success px-6 with-focus">${(0, i18next.t)("accept")}</button>` }]
+		buttons: [{ content: `<button class="button is-info px-6 with-focus">${(0, i18next.t)("accept")}</button>` }]
 	});
 }
 /************************************************************
@@ -2278,7 +2283,7 @@ function display_warning_message(title, msg, callback) {
 		msg,
 		callback,
 		type: "warning",
-		buttons: [{ content: `<button class="button is-success px-6 with-focus">${(0, i18next.t)("accept")}</button>` }]
+		buttons: [{ content: `<button class="button is-warning px-6 with-focus">${(0, i18next.t)("accept")}</button>` }]
 	});
 }
 /************************************************************
@@ -2291,7 +2296,7 @@ function display_error_message(title, msg, callback, without_buttons) {
 		msg,
 		callback,
 		type: "error",
-		buttons: without_buttons ? [] : [{ content: `<button class="button is-success px-6 with-focus">${(0, i18next.t)("accept")}</button>` }]
+		buttons: without_buttons ? [] : [{ content: `<button class="button is-danger px-6 with-focus">${(0, i18next.t)("accept")}</button>` }]
 	});
 }
 /************************************************************
@@ -2299,7 +2304,7 @@ function display_error_message(title, msg, callback, without_buttons) {
 ************************************************************/
 function get_yesnocancel(msg, callback) {
 	let content = `<div class="">
-        <p class="title">${(0, i18next.t)(msg)}</p>
+        <p class="yui-volatil-msg">${(0, i18next.t)(msg)}</p>
         <div class="buttons is-centered">
             <button class="button to-close is-success px-6 with-focus yesButton">${(0, i18next.t)("yes")}</button>
             <button class="button to-close is-danger px-6 noButton">${(0, i18next.t)("no")}</button>
@@ -2315,7 +2320,7 @@ function get_yesnocancel(msg, callback) {
 		title: null,
 		msg: content,
 		callback: callback_,
-		type: "info"
+		type: "question"
 	});
 }
 /************************************************************
@@ -2323,7 +2328,7 @@ function get_yesnocancel(msg, callback) {
 ************************************************************/
 function get_yesno(msg, callback) {
 	let content = `<div class="">
-        <p class="title">${msg}</p>
+        <p class="yui-volatil-msg">${msg}</p>
         <div class="buttons is-centered">
             <button class="button to-close is-success px-6 with-focus yesButton">${(0, i18next.t)("yes")}</button>
             <button class="button to-close is-danger px-6 noButton">${(0, i18next.t)("no")}</button>
@@ -2338,7 +2343,7 @@ function get_yesno(msg, callback) {
 		title: null,
 		msg: content,
 		callback: callback_,
-		type: "info"
+		type: "question"
 	});
 }
 /************************************************************
@@ -2346,7 +2351,7 @@ function get_yesno(msg, callback) {
 ************************************************************/
 function get_ok(msg, callback) {
 	let content = `<div class="">
-        <p class="title">${msg}</p>
+        <p class="yui-volatil-msg">${msg}</p>
         <div class="buttons is-centered">
             <button class="button to-close is-success px-6 with-focus yesButton">${(0, i18next.t)("accept")}</button>
         </div>
@@ -2360,7 +2365,7 @@ function get_ok(msg, callback) {
 		title: null,
 		msg: content,
 		callback: callback_,
-		type: "info"
+		type: "success"
 	});
 }
 /************************************************************

package/dist/gobj-ui.es.js

@@ -1557,7 +1557,7 @@ function yui_toolbar(attrs = {}, items = []) {
 *          The tabs in a content-layer to manage sub-containers can be managed by yui_tabs.js
 *          or be integrated in each gobj.
 *
-*          Copyright (c) 2025, ArtGins.
+*          Copyright (c) 2025-2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/
 /***************************************************************
@@ -2148,9 +2148,19 @@ console.log("GLOBAL callback");
 ************************************************************/
 function display_volatil_modal({ title, msg, callback, type, x_close, buttons }) {
 	const callback_ = callback;
+	let type_ = (type || "info").toLowerCase();
+	if (type_ === "danger") type_ = "error";
+	const TYPE_ICONS = {
+		"info": "yi-circle-info",
+		"question": "yi-question",
+		"success": "yi-square-check",
+		"warning": "yi-triangle-exclamation",
+		"error": "yi-circle-exclamation"
+	};
+	let icon = TYPE_ICONS[type_] || TYPE_ICONS["info"];
 	let $element = createElement2([
 		"div",
-		{ class: "modal" },
+		{ class: `modal yui-volatil is-${type_}` },
 		[[
 			"div",
 			{ class: "modal-background" },
@@ -2162,44 +2172,39 @@ function display_volatil_modal({ title, msg, callback, type, x_close, buttons })
 		]]
 	]);
 	const destroyModal = () => {
+		document.removeEventListener("keydown", on_keydown, true);
 		$element.classList.remove("is-active");
 		$element.parentNode.removeChild($element);
 	};
+	const on_keydown = (evt) => {
+		if (evt.key !== "Escape") return;
+		let $modals = document.querySelectorAll(".modal.is-active");
+		if ($modals.length && $modals[$modals.length - 1] !== $element) return;
+		evt.stopPropagation();
+		evt.preventDefault();
+		let $cancel = $element.querySelector(".cancelButton, .delete");
+		if ($cancel) $cancel.click();
+		else destroyModal();
+	};
+	document.addEventListener("keydown", on_keydown, true);
 	let $modal_card = $element.querySelector(".modal-card");
-	if (title || x_close) {
-		if (!type) type = "";
-		let background_color = "";
-		switch (type.toLowerCase()) {
-			case "info":
-				background_color = "has-background-info";
-				break;
-			case "success":
-				background_color = "has-background-success";
-				break;
-			case "warning":
-				background_color = "has-background-warning";
-				break;
-			case "error":
-			case "danger":
-				background_color = "has-background-danger";
-				break;
-		}
-		let title_ = !title ? [] : [
-			"p",
-			{ class: "modal-card-title has-text-centered" },
-			title
-		];
-		let x_close_ = !x_close ? [] : ["button", {
-			class: "delete is-large",
-			"aria-label": "close"
-		}];
-		let $header = createElement2([
-			"header",
-			{ class: `modal-card-head ${background_color} p-3` },
-			[title_, x_close_]
-		]);
-		$modal_card.appendChild($header);
-	}
+	$modal_card.appendChild(createElement2([
+		"div",
+		{ class: "yui-volatil-icon" },
+		[["i", {
+			class: icon,
+			"aria-hidden": "true"
+		}]]
+	]));
+	if (title) $modal_card.appendChild(createElement2([
+		"p",
+		{ class: "yui-volatil-title has-text-centered" },
+		title
+	]));
+	if (x_close) $modal_card.appendChild(createElement2(["button", {
+		class: "delete yui-volatil-x",
+		"aria-label": "close"
+	}]));
 	let $section = createElement2([
 		"section",
 		{ class: "modal-card-body has-text-centered" },
@@ -2260,7 +2265,7 @@ function display_info_message(title, msg, callback) {
 		msg,
 		callback,
 		type: "info",
-		buttons: [{ content: `<button class="button is-success px-6 with-focus">${t("accept")}</button>` }]
+		buttons: [{ content: `<button class="button is-info px-6 with-focus">${t("accept")}</button>` }]
 	});
 }
 /************************************************************
@@ -2273,7 +2278,7 @@ function display_warning_message(title, msg, callback) {
 		msg,
 		callback,
 		type: "warning",
-		buttons: [{ content: `<button class="button is-success px-6 with-focus">${t("accept")}</button>` }]
+		buttons: [{ content: `<button class="button is-warning px-6 with-focus">${t("accept")}</button>` }]
 	});
 }
 /************************************************************
@@ -2286,7 +2291,7 @@ function display_error_message(title, msg, callback, without_buttons) {
 		msg,
 		callback,
 		type: "error",
-		buttons: without_buttons ? [] : [{ content: `<button class="button is-success px-6 with-focus">${t("accept")}</button>` }]
+		buttons: without_buttons ? [] : [{ content: `<button class="button is-danger px-6 with-focus">${t("accept")}</button>` }]
 	});
 }
 /************************************************************
@@ -2294,7 +2299,7 @@ function display_error_message(title, msg, callback, without_buttons) {
 ************************************************************/
 function get_yesnocancel(msg, callback) {
 	let content = `<div class="">
-        <p class="title">${t(msg)}</p>
+        <p class="yui-volatil-msg">${t(msg)}</p>
         <div class="buttons is-centered">
             <button class="button to-close is-success px-6 with-focus yesButton">${t("yes")}</button>
             <button class="button to-close is-danger px-6 noButton">${t("no")}</button>
@@ -2310,7 +2315,7 @@ function get_yesnocancel(msg, callback) {
 		title: null,
 		msg: content,
 		callback: callback_,
-		type: "info"
+		type: "question"
 	});
 }
 /************************************************************
@@ -2318,7 +2323,7 @@ function get_yesnocancel(msg, callback) {
 ************************************************************/
 function get_yesno(msg, callback) {
 	let content = `<div class="">
-        <p class="title">${msg}</p>
+        <p class="yui-volatil-msg">${msg}</p>
         <div class="buttons is-centered">
             <button class="button to-close is-success px-6 with-focus yesButton">${t("yes")}</button>
             <button class="button to-close is-danger px-6 noButton">${t("no")}</button>
@@ -2333,7 +2338,7 @@ function get_yesno(msg, callback) {
 		title: null,
 		msg: content,
 		callback: callback_,
-		type: "info"
+		type: "question"
 	});
 }
 /************************************************************
@@ -2341,7 +2346,7 @@ function get_yesno(msg, callback) {
 ************************************************************/
 function get_ok(msg, callback) {
 	let content = `<div class="">
-        <p class="title">${msg}</p>
+        <p class="yui-volatil-msg">${msg}</p>
         <div class="buttons is-centered">
             <button class="button to-close is-success px-6 with-focus yesButton">${t("accept")}</button>
         </div>
@@ -2355,7 +2360,7 @@ function get_ok(msg, callback) {
 		title: null,
 		msg: content,
 		callback: callback_,
-		type: "info"
+		type: "success"
 	});
 }
 /************************************************************

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yuneta/gobj-ui",
-    "version": "2.4.0",
+    "version": "2.5.0",
     "type": "module",
     "main": "dist/gobj-ui.cjs.js",
     "module": "dist/gobj-ui.es.js",

package/src/c_yui_main.css

@@ -421,3 +421,81 @@ a.flex-horizontal-section { /* To make flex any <a> */
         color: var(--bulma-link-invert);
     }
 }
+
+/*============================================================
+ *      Volatil modals (display_volatil_modal):
+ *      get_yesnocancel / get_yesno / get_ok and the typed
+ *      info/warning/error messages. Icon-centric layout: a
+ *      narrow rounded card with a tinted round icon of the
+ *      type; everything maps to Bulma vars so one rule set
+ *      follows light and dark.
+ *============================================================*/
+.modal.yui-volatil .modal-background {
+    background-color: color-mix(in srgb, var(--bulma-scheme-invert, #000) 45%, transparent);
+}
+.modal.yui-volatil .modal-card {
+    position: relative;
+    width: min(26rem, calc(100vw - 2rem));
+    border-radius: 0.75rem;
+    background: var(--bulma-scheme-main, #fff);
+    box-shadow: 0 12px 40px color-mix(in srgb, var(--bulma-scheme-invert, #000) 30%, transparent);
+    padding: 1.5rem 1.5rem 1.25rem;
+}
+.modal.yui-volatil .modal-card-body {
+    background: transparent;
+    padding: 0;
+}
+.modal.yui-volatil .modal-card-foot {
+    background: transparent;
+    border-top: none;
+    padding: 1rem 0 0;
+}
+.yui-volatil-icon {
+    width: 3.25rem;
+    height: 3.25rem;
+    border-radius: 9999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 0.75rem;
+    font-size: 1.5rem;
+    background: color-mix(in srgb, var(--yui-volatil-base, var(--bulma-info, #3e8ed0)) 15%, transparent);
+    color: var(--yui-volatil-ink, var(--bulma-info, #3e8ed0));
+}
+.modal.yui-volatil.is-info,
+.modal.yui-volatil.is-question {
+    --yui-volatil-base: var(--bulma-info, #3e8ed0);
+    --yui-volatil-ink: var(--bulma-info-on-scheme, #3e8ed0);
+}
+.modal.yui-volatil.is-success {
+    --yui-volatil-base: var(--bulma-success, #48c78e);
+    --yui-volatil-ink: var(--bulma-success-on-scheme, #257953);
+}
+.modal.yui-volatil.is-warning {
+    --yui-volatil-base: var(--bulma-warning, #ffe08a);
+    --yui-volatil-ink: var(--bulma-warning-on-scheme, #946c00);
+}
+.modal.yui-volatil.is-error {
+    --yui-volatil-base: var(--bulma-danger, #f14668);
+    --yui-volatil-ink: var(--bulma-danger-on-scheme, #cc0f35);
+}
+.yui-volatil-title {
+    font-size: 1.15rem;
+    font-weight: 600;
+    text-transform: capitalize;
+    margin-bottom: 0.25rem;
+    color: var(--bulma-text-strong, inherit);
+}
+.yui-volatil-x {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+}
+.yui-volatil-msg {
+    font-size: 1.05rem;
+    color: var(--bulma-text, inherit);
+}
+.modal.yui-volatil .modal-card-body .buttons {
+    margin-top: 1.25rem;
+    margin-bottom: 0;
+}

package/src/c_yui_main.js

@@ -27,7 +27,7 @@
  *          The tabs in a content-layer to manage sub-containers can be managed by yui_tabs.js
  *          or be integrated in each gobj.
  *
- *          Copyright (c) 2025, ArtGins.
+ *          Copyright (c) 2025-2026, ArtGins.
  *          All Rights Reserved.
  ***********************************************************************/
 /* global ResizeObserver, window, document */
@@ -879,50 +879,77 @@ function display_volatil_modal(
     {title, msg, callback, type, x_close, buttons}
 ) {
     const callback_ = callback;  // ✅ Assign to a constant
+
+    /*  Normalize the type: it picks the tinted icon and the accent
+     *  color (see the .yui-volatil rules in c_yui_main.css).  */
+    let type_ = (type || "info").toLowerCase();
+    if(type_ === "danger") {
+        type_ = "error";
+    }
+    const TYPE_ICONS = {
+        "info":     "yi-circle-info",
+        "question": "yi-question",
+        "success":  "yi-square-check",
+        "warning":  "yi-triangle-exclamation",
+        "error":    "yi-circle-exclamation",
+    };
+    let icon = TYPE_ICONS[type_] || TYPE_ICONS["info"];
+
     let $element = createElement2([
-        'div', {class: 'modal'}, [
+        'div', {class: `modal yui-volatil is-${type_}`}, [
             ['div', {class: 'modal-background'}, ''],
             ['div', {class: 'modal-card'}, []]
         ]
     ]);
 
     const destroyModal = ()=> {
+        document.removeEventListener('keydown', on_keydown, true);
         $element.classList.remove('is-active');
         $element.parentNode.removeChild($element);
     };
 
-    let $modal_card = $element.querySelector('.modal-card');
-    if(title || x_close) {
-        if(!type) {
-            type = "";
+    /*  Escape = cancel. Capture phase on document, so Escape handlers
+     *  beneath the modal (e.g. the treedb edit dialog's own) don't also
+     *  fire and stack a second confirm. Only the top-most open modal
+     *  reacts; the cancel/x click path carries the callback semantics,
+     *  a buttonless modal just dismisses. */
+    const on_keydown = (evt)=> {
+        if(evt.key !== "Escape") {
+            return;
+        }
+        let $modals = document.querySelectorAll('.modal.is-active');
+        if($modals.length && $modals[$modals.length - 1] !== $element) {
+            return;
         }
-        let background_color = "";
-        switch(type.toLowerCase()) {
-            case "info":
-                background_color = 'has-background-info';
-                break;
-            case "success":
-                background_color = 'has-background-success';
-                break;
-            case "warning":
-                background_color = 'has-background-warning';
-                break;
-            case "error":
-            case "danger":
-                background_color = 'has-background-danger';
-                break;
+        evt.stopPropagation();
+        evt.preventDefault();
+        let $cancel = $element.querySelector('.cancelButton, .delete');
+        if($cancel) {
+            $cancel.click();
+        } else {
+            destroyModal();
         }
+    };
+    document.addEventListener('keydown', on_keydown, true);
 
-        let title_ = !title ? [] : ['p', {class: 'modal-card-title has-text-centered'}, title];
-        let x_close_ = !x_close ? [] : ['button', {class: 'delete is-large', 'aria-label': 'close'}];
+    let $modal_card = $element.querySelector('.modal-card');
 
-        let $header = createElement2(
-            ['header', {class: `modal-card-head ${background_color} p-3`}, [
-                title_,
-                x_close_
-            ]]
-        );
-        $modal_card.appendChild($header);
+    /*  Icon-centric layout (no colored header bar): a tinted round
+     *  icon of the type, an optional title, an optional top-right x. */
+    $modal_card.appendChild(createElement2(
+        ['div', {class: 'yui-volatil-icon'}, [
+            ['i', {class: icon, 'aria-hidden': 'true'}]
+        ]]
+    ));
+    if(title) {
+        $modal_card.appendChild(createElement2(
+            ['p', {class: 'yui-volatil-title has-text-centered'}, title]
+        ));
+    }
+    if(x_close) {
+        $modal_card.appendChild(createElement2(
+            ['button', {class: 'delete yui-volatil-x', 'aria-label': 'close'}]
+        ));
     }
 
     let $section = createElement2(
@@ -1017,7 +1044,7 @@ function display_info_message(title, msg, callback)
         type: 'info',
         buttons: [{
             content:
-            `<button class="button is-success px-6 with-focus">${t('accept')}</button>`,
+            `<button class="button is-info px-6 with-focus">${t('accept')}</button>`,
         }]
     });
 }
@@ -1037,7 +1064,7 @@ function display_warning_message(title, msg, callback)
         type: 'warning',
         buttons: [{
             content:
-                `<button class="button is-success px-6 with-focus">${t('accept')}</button>`,
+                `<button class="button is-warning px-6 with-focus">${t('accept')}</button>`,
         }]
     });
 }
@@ -1057,7 +1084,7 @@ function display_error_message(title, msg, callback, without_buttons)
         type: 'error',
         buttons: without_buttons? []: [{
             content:
-                `<button class="button is-success px-6 with-focus">${t('accept')}</button>`,
+                `<button class="button is-danger px-6 with-focus">${t('accept')}</button>`,
         }]
     });
 }
@@ -1069,7 +1096,7 @@ function get_yesnocancel(msg, callback)
 {
     let content =
         `<div class="">
-        <p class="title">${t(msg)}</p>
+        <p class="yui-volatil-msg">${t(msg)}</p>
         <div class="buttons is-centered">
             <button class="button to-close is-success px-6 with-focus yesButton">${t('yes')}</button>
             <button class="button to-close is-danger px-6 noButton">${t('no')}</button>
@@ -1091,7 +1118,7 @@ function get_yesnocancel(msg, callback)
         title: null,
         msg: content,
         callback: callback_,
-        type: 'info'
+        type: 'question'
     });
 }
 
@@ -1102,7 +1129,7 @@ function get_yesno(msg, callback)
 {
     let content =
     `<div class="">
-        <p class="title">${msg}</p>
+        <p class="yui-volatil-msg">${msg}</p>
         <div class="buttons is-centered">
             <button class="button to-close is-success px-6 with-focus yesButton">${t('yes')}</button>
             <button class="button to-close is-danger px-6 noButton">${t('no')}</button>
@@ -1123,7 +1150,7 @@ function get_yesno(msg, callback)
         title: null,
         msg: content,
         callback: callback_,
-        type: 'info'
+        type: 'question'
     });
 }
 
@@ -1134,7 +1161,7 @@ function get_ok(msg, callback)
 {
     let content =
         `<div class="">
-        <p class="title">${msg}</p>
+        <p class="yui-volatil-msg">${msg}</p>
         <div class="buttons is-centered">
             <button class="button to-close is-success px-6 with-focus yesButton">${t('accept')}</button>
         </div>
@@ -1154,7 +1181,7 @@ function get_ok(msg, callback)
         title: null,
         msg: content,
         callback: callback_,
-        type: 'info'
+        type: 'success'
     });
 }
 

package/src/yui_icons.css

@@ -239,3 +239,18 @@
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");
 }
+
+.yi-circle-info::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E");
+}
+
+.yi-triangle-exclamation::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E");
+}
+
+.yi-circle-exclamation::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zm32 224a32 32 0 1 1 -64 0 32 32 0 1 1 64 0z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zm32 224a32 32 0 1 1 -64 0 32 32 0 1 1 64 0z'/%3E%3C/svg%3E");
+}