@yuneta/gobj-ui 2.4.0 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yuneta/gobj-ui",
-    "version": "2.4.0",
+    "version": "2.6.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/c_yui_shell.js

@@ -34,6 +34,8 @@ import {
     gclass_create, log_error, log_warning,
     gobj_create, gobj_destroy,
     gobj_start, gobj_stop,
+    gobj_parent,
+    gobj_gclass_name,
     gobj_publish_event,
     gobj_send_event,
     gobj_subscribe_event,
@@ -68,6 +70,12 @@ import {
  ***************************************************************/
 const GCLASS_NAME = "C_YUI_SHELL";
 
+/*  Last shell created on the page — fallback for yui_shell_of()
+ *  when the caller is not a shell descendant (e.g. a floating
+ *  C_YUI_WINDOW parented to the app gobj).  Real apps have exactly
+ *  one shell; tests that create several get the most recent. */
+let __last_shell__ = null;
+
 /*  Zones rendered inside the base layer. */
 const ZONE_IDS = ["top", "top-sub", "left", "center", "right", "bottom-sub", "bottom"];
 
@@ -166,6 +174,8 @@ function mt_create(gobj)
         active_dropdown: null
     });
 
+    __last_shell__ = gobj;
+
     build_ui(gobj);
 }
 
@@ -318,6 +328,10 @@ function mt_destroy(gobj)
     }
     gobj_write_attr(gobj, "$container", null);
     gobj_write_attr(gobj, "priv", null);
+
+    if(__last_shell__ === gobj) {
+        __last_shell__ = null;
+    }
 }
 
 
@@ -2408,6 +2422,25 @@ function register_c_yui_shell()
  *  bottom of the file to keep the skeleton layout intact.
  ***************************************************************/
 
+/************************************************************
+ *  Resolve the shell that governs `gobj`: the nearest
+ *  C_YUI_SHELL ancestor, else the last shell created on the
+ *  page (apps have exactly one).  Null when no shell exists —
+ *  callers must degrade loudly (shell_modals logs a warning
+ *  and resolves the safe default).
+ ************************************************************/
+function yui_shell_of(gobj)
+{
+    let g = gobj;
+    while(g) {
+        if(gobj_gclass_name(g) === GCLASS_NAME) {
+            return g;
+        }
+        g = gobj_parent(g);
+    }
+    return __last_shell__;
+}
+
 /************************************************************
  *  Programmatic navigation (bypass hash).
  ************************************************************/
@@ -2552,6 +2585,7 @@ function yui_shell_close_dropdown(shell_gobj)
 
 export {
     register_c_yui_shell,
+    yui_shell_of,
     yui_shell_navigate,
     yui_shell_open_drawer,
     yui_shell_close_drawer,

package/src/c_yui_treedb_graph.js

@@ -80,7 +80,8 @@ import {
     set_submit_state,
     set_active_state,
 } from "./lib_graph.js";
-import {display_error_message} from "./c_yui_main.js";
+import {yui_shell_show_error} from "./shell_modals.js";
+import {yui_shell_of} from "./c_yui_shell.js";
 
 import {t} from "i18next";
 
@@ -941,7 +942,7 @@ function ac_mt_command_answer(gobj, event, kw, src)
              *  app-modal that wedges the whole SPA behind an empty tab. */
             show_load_error(gobj, t(comment));
         } else {
-            display_error_message("Error", t(comment));
+            yui_shell_show_error(yui_shell_of(gobj), comment, {t: t});
         }
         // HACK don't return for non-descs, pass errors when need it.
     }

package/src/c_yui_treedb_topic_with_form.js

@@ -57,9 +57,16 @@ import {
 } from "@yuneta/gobj-js";
 
 import {
-    get_yesnocancel,
-    get_ok,
-} from "./c_yui_main.js";
+    yui_shell_confirm_yesnocancel,
+    yui_shell_confirm_ok,
+    yui_shell_popup_layer,
+} from "./shell_modals.js";
+
+import {
+    yui_shell_of,
+    yui_shell_push_escape,
+    yui_shell_pop_escape,
+} from "./c_yui_shell.js";
 
 import {register_c_yui_form} from "./c_yui_form.js";
 
@@ -132,17 +139,26 @@ let PRIVATE_DATA = {
     tabulator:          null,
     form:               null,   // hosted C_YUI_FORM child (while dialog open)
     $popup:             null,   // dialog DOM element
-    on_keydown:         null,   // document Escape handler (while dialog open)
+    on_keydown:         null,   // document Escape handler (no-shell fallback)
+    escape_shell:       null,   // shell whose Escape chain holds escape_handler
+    escape_handler:     null,   // close handler pushed on the shell chain
 };
 
 let __gclass__ = null;
 
-/*  Where to mount the edit/delete modal.  The legacy C_YUI_MAIN
- *  shell provided a "#popup-layer" element; the new C_YUI_SHELL does
- *  not.  Bulma `.modal` is position:fixed, so document.body is a
- *  correct universal fallback (works under any host). */
-function popup_mount_layer()
+/*  Where to mount the edit/delete modal.  Under a C_YUI_SHELL use
+ *  its popup layer (z 20): the shell confirms live on the modal
+ *  layer (z 99), so they always paint above this dialog — a
+ *  body-mounted Bulma `.modal` would cover them (the shell is a
+ *  stacking context below body-level modals).  The legacy
+ *  C_YUI_MAIN "#popup-layer" and document.body (Bulma `.modal` is
+ *  position:fixed) remain the shell-less fallbacks. */
+function popup_mount_layer(gobj)
 {
+    let $layer = yui_shell_popup_layer(yui_shell_of(gobj));
+    if($layer) {
+        return $layer;
+    }
     return document.getElementById("popup-layer") || document.body;
 }
 
@@ -200,6 +216,11 @@ function mt_stop(gobj)
  ***************************************************************/
 function mt_destroy(gobj)
 {
+    /*  A destroy with the edit dialog open (e.g. the hosted view is
+     *  rebuilt on a transport rebind) must tear the dialog down too:
+     *  it unhooks the Escape handler (shell chain or document
+     *  listener) and removes the dialog DOM. */
+    close_form_dialog(gobj);
     destroy_ui(gobj);
 }
 
@@ -1181,17 +1202,30 @@ function open_form_dialog(gobj, mode, record)
         $form_container.style.minHeight = "0";
     }
 
-    popup_mount_layer().appendChild($element);
+    popup_mount_layer(gobj).appendChild($element);
     refresh_language($element, t);
 
-    /*  Escape closes through the same unsaved-changes guard as the X. */
-    priv.on_keydown = function(evt) {
-        if(evt.key === "Escape") {
-            evt.stopPropagation();
+    /*  Escape closes through the same unsaved-changes guard as the X.
+     *  Under a shell, ride its Escape priority chain — LIFO with the
+     *  shell confirm dialogs, so Escape on an open confirm never
+     *  reaches this dialog and stacks a second one.  Without a shell
+     *  (bare unit tests) fall back to a document listener. */
+    let shell = yui_shell_of(gobj);
+    if(shell) {
+        priv.escape_shell = shell;
+        priv.escape_handler = function() {
             request_close_form_dialog(gobj);
-        }
-    };
-    document.addEventListener("keydown", priv.on_keydown);
+        };
+        yui_shell_push_escape(shell, "popup", priv.escape_handler);
+    } else {
+        priv.on_keydown = function(evt) {
+            if(evt.key === "Escape") {
+                evt.stopPropagation();
+                request_close_form_dialog(gobj);
+            }
+        };
+        document.addEventListener("keydown", priv.on_keydown);
+    }
 
     gobj_start(form);   // mt_start loads `record` into the form
 
@@ -1219,8 +1253,12 @@ function request_close_form_dialog(gobj)
         let kw = {};
         gobj_send_event(priv.form, "EV_WINDOW_TO_CLOSE", kw, gobj);
         if(kw.abort_close) {
-            get_yesnocancel(t('All changes will be lost. Are you sure?'), function(evt) {
-                if(evt === "yes") {
+            yui_shell_confirm_yesnocancel(
+                yui_shell_of(gobj),
+                'All changes will be lost. Are you sure?',
+                {t: t, yes_label: "yes", no_label: "no", cancel_label: "cancel"}
+            ).then(function(answer) {
+                if(answer === "yes") {
                     close_form_dialog(gobj);
                 }
             });
@@ -1236,6 +1274,11 @@ function request_close_form_dialog(gobj)
 function close_form_dialog(gobj)
 {
     let priv = gobj.priv;
+    if(priv.escape_handler) {
+        yui_shell_pop_escape(priv.escape_shell, priv.escape_handler);
+        priv.escape_shell = null;
+        priv.escape_handler = null;
+    }
     if(priv.on_keydown) {
         document.removeEventListener("keydown", priv.on_keydown);
         priv.on_keydown = null;
@@ -1640,7 +1683,7 @@ function show_dropdown_popup_menu(gobj, x, y, items, callback)
     /*
      *  Add to popup layer
      */
-    popup_mount_layer().appendChild($element);
+    popup_mount_layer(gobj).appendChild($element);
 
     /*
      *  Set position
@@ -1929,12 +1972,18 @@ function ac_delete_rows(gobj, event, kw, src)
          *----------------------------*/
         let rows = tabulator.getSelectedData();
         if (!rows.length) {
-            get_ok(t('please select some row'));
+            yui_shell_confirm_ok(
+                yui_shell_of(gobj), 'please select some row',
+                {t: t, ok_label: "accept"}
+            );
             return 0;
         }
 
-        get_yesnocancel(t('are you sure'), function(evt) {
-            if(evt === "yes") {
+        yui_shell_confirm_yesnocancel(
+            yui_shell_of(gobj), 'are you sure',
+            {t: t, yes_label: "yes", no_label: "no", cancel_label: "cancel"}
+        ).then(function(answer) {
+            if(answer === "yes") {
                 for(let row of rows) {
                     // TODO why don't send once EV_DELETE_RECORD(S)
                     gobj_publish_event(
@@ -1954,8 +2003,11 @@ function ac_delete_rows(gobj, event, kw, src)
          *  Delete one row
          *  {index: , row: }
          *----------------------------*/
-        get_yesnocancel(t('are you sure'), function(evt) {
-            if(evt === "yes") {
+        yui_shell_confirm_yesnocancel(
+            yui_shell_of(gobj), 'are you sure',
+            {t: t, yes_label: "yes", no_label: "no", cancel_label: "cancel"}
+        ).then(function(answer) {
+            if(answer === "yes") {
                 gobj_publish_event(
                     gobj,
                     "EV_DELETE_RECORD",
@@ -1983,7 +2035,10 @@ function ac_copy_rows(gobj, event, kw, src)
      *----------------------------*/
     let rows = tabulator.getSelectedData();
     if (!rows.length) {
-        get_ok(t('please select some row'));
+        yui_shell_confirm_ok(
+            yui_shell_of(gobj), 'please select some row',
+            {t: t, ok_label: "accept"}
+        );
         return 0;
     }
 

package/src/c_yui_treedb_topics.js

@@ -41,9 +41,8 @@ import {
     refresh_language,
 } from "@yuneta/gobj-js";
 
-import {
-    display_error_message
-} from "./c_yui_main.js";
+import {yui_shell_show_error} from "./shell_modals.js";
+import {yui_shell_of} from "./c_yui_shell.js";
 
 import {t} from "i18next";
 
@@ -819,7 +818,7 @@ function ac_mt_command_answer(gobj, event, kw, src)
              *  app-modal that wedges the whole SPA behind an empty tab. */
             show_load_error(gobj, t(comment));
         } else {
-            display_error_message("Error", t(comment));
+            yui_shell_show_error(yui_shell_of(gobj), comment, {t: t});
         }
         return 0;
     }

package/src/c_yui_window.js

@@ -44,7 +44,8 @@ import {
 
 import {t} from "i18next";
 
-import {get_yesnocancel} from "./c_yui_main.js";
+import {yui_shell_confirm_yesnocancel} from "./shell_modals.js";
+import {yui_shell_of} from "./c_yui_shell.js";
 
 /***************************************************************
  *              Constants
@@ -672,8 +673,11 @@ function close_window(gobj)
         gobj_stop_children(gobj);
         gobj_destroy(gobj);
     } else if(kw_close.warning) {
-        get_yesnocancel(kw_close.warning, function(resp) {
-            if(resp === "yes") {
+        yui_shell_confirm_yesnocancel(
+            yui_shell_of(gobj), kw_close.warning,
+            {t: t, yes_label: "yes", no_label: "no", cancel_label: "cancel"}
+        ).then(function(answer) {
+            if(answer === "yes") {
                 if(on_close) {
                     on_close();
                 }

package/src/shell_modals.js

@@ -49,16 +49,36 @@ import {
  ***************************************************************/
 function notification_layer(shell)
 {
+    if(!shell) {
+        return null;
+    }
     let priv = gobj_read_attr(shell, "priv");
     return priv && priv.layers && priv.layers.notification;
 }
 
 function modal_layer(shell)
 {
+    if(!shell) {
+        return null;
+    }
     let priv = gobj_read_attr(shell, "priv");
     return priv && priv.layers && priv.layers.modal;
 }
 
+/*  Public: where a component should mount its own popup/dialog DOM
+ *  (e.g. the treedb edit dialog).  The popup layer (z 20) sits below
+ *  the modal layer (z 99), so shell confirms always paint above the
+ *  component's dialog — matching the Escape chain LIFO order.  Null
+ *  when there is no shell: the caller picks its legacy fallback. */
+export function yui_shell_popup_layer(shell)
+{
+    if(!shell) {
+        return null;
+    }
+    let priv = gobj_read_attr(shell, "priv");
+    return (priv && priv.layers && priv.layers.popup) || null;
+}
+
 
 /***************************************************************
  *  i18n bridge:

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");
+}