@yuneta/gobj-ui 7.23.99 → 7.23.101

package/dist/gobj-ui.cjs.js

@@ -10524,6 +10524,28 @@ function yui_toolbar(attrs = {}, items = []) {
 	updateScrollButtons();
 	return $toolbar;
 }
+/************************************************************
+*  Set or reset the PRESSED state of a toggle.
+*
+*  It lives here, with `yui_toolbar.css`, and not in
+*  `lib_graph.js` where it was born: a pressed toggle is a
+*  TOOLBAR thing, and a stylesheet rides its JS import -- while
+*  the rule sat in the graph's file, an app without a graph got
+*  the class and no paint, which from the outside is a button
+*  that does not work. `lib_graph.js` re-exports it, so every
+*  caller written against that path keeps working.
+*
+*  Written with `querySelectorAll` and not with `addClasses`
+*  from `lib_graph.js` on purpose: importing that would drag
+*  `lib_graph.css` into every toolbar, which is the same trap
+*  the other way round.
+************************************************************/
+function set_pressed_state($container, selector, set) {
+	if (!$container) return;
+	$container.querySelectorAll(selector).forEach(($el) => {
+		$el.classList.toggle("pressed_state", !!set);
+	});
+}
 //#endregion
 //#region src/lib_graph.js
 /***********************************************************************
@@ -10595,19 +10617,6 @@ function set_active_state($container, selector, set) {
 	if (set) addClasses($container, selector, "color_active_state");
 	else removeClasses($container, selector, "color_active_state");
 }
-/************************************************************
-*  Set or reset the 'pressed' state of a TOGGLE.
-*
-*  Not one of the colours above: each of those names a KIND of
-*  action (create, pending, history, destructive), and a toggle
-*  is not an action -- it is a state the control is IN. So it
-*  looks pressed instead of changing category, which also keeps
-*  it out of the way of a neighbour wearing the same hue.
-************************************************************/
-function set_pressed_state($container, selector, set) {
-	if (set) addClasses($container, selector, "pressed_state");
-	else removeClasses($container, selector, "pressed_state");
-}
 /**
 * Returns a smart stroke color in `rgba()` format based on:
 * - The given fill color (hex or rgb[a])
@@ -13411,7 +13420,12 @@ function icon_button$1(gobj, icon, event_name, label_key) {
 *   aimed — reaching the graph from the tree would mean passing
 *   through the text and rebuilding it on the way — so each view gets
 *   its own button and says where it goes.  apply_view_mode() moves
-*   the `is-active` mark.
+*   the `pressed_state` mark -- the library's one way of saying a
+*   toggle is ON, the same the graph toolbars and the treedb legend
+*   use.  It used to be `is-active` with a blue fill of its own: a
+*   STATE wearing a palette colour, which is what the palette does
+*   NOT mean (it names kinds of ACTION), and a third spelling of a
+*   thing the library already had a name for.
 ************************************************************/
 function view_mode_switch$1(gobj) {
 	return [
@@ -13508,7 +13522,7 @@ function apply_view_mode$1(gobj) {
 		if ($el) $el.classList.toggle("is-hidden", mode !== "tree");
 	});
 	if (priv.$mode_btns) for (let [m, $btn] of priv.$mode_btns) {
-		$btn.classList.toggle("is-active", m === mode);
+		$btn.classList.toggle("pressed_state", m === mode);
 		$btn.setAttribute("aria-pressed", m === mode ? "true" : "false");
 	}
 }
@@ -15815,7 +15829,7 @@ function apply_view_mode(gobj) {
 	};
 	for (let [m, $el] of Object.entries(bodies)) if ($el) $el.classList.toggle("is-hidden", m !== mode);
 	if (priv.$mode_btns) for (let [m, $btn] of priv.$mode_btns) {
-		$btn.classList.toggle("is-active", m === mode);
+		$btn.classList.toggle("pressed_state", m === mode);
 		$btn.setAttribute("aria-pressed", m === mode ? "true" : "false");
 	}
 }
@@ -16568,7 +16582,7 @@ function machine_view_switch(gobj) {
 			return [
 				"button",
 				{
-					class: `button is-small GCLASS_MACHINE_VIEW GCLASS_MACHINE_VIEW_${v.mode.toUpperCase()}` + (on ? " is-active" : ""),
+					class: `button is-small GCLASS_MACHINE_VIEW GCLASS_MACHINE_VIEW_${v.mode.toUpperCase()}` + (on ? " pressed_state" : ""),
 					type: "button",
 					"aria-pressed": on ? "true" : "false",
 					title: (0, i18next.t)(v.key),
@@ -63567,9 +63581,9 @@ function refresh_legend(gobj) {
 		if (is_main && state.main_chosen) extras.push([
 			"button",
 			{
-				class: "GRAPH_LEGEND_STAR button pressed_state",
+				class: "GRAPH_LEGEND_STAR button",
 				type: "button",
-				style: "padding:0 .5rem;",
+				style: "padding:0 .5rem; box-shadow: inset 0 0 0 2px var(--bulma-text, #2e333d);",
 				title: (0, i18next.t)("main topic"),
 				"data-i18n-title": "main topic",
 				"aria-label": (0, i18next.t)("main topic"),
@@ -63578,7 +63592,7 @@ function refresh_legend(gobj) {
 			},
 			[[
 				"span",
-				{ style: LEGEND_GLYPH_STYLE },
+				{ style: LEGEND_STAR_MAIN_STYLE },
 				"★"
 			]],
 			{ click: (evt) => {

package/dist/gobj-ui.es.js

@@ -10519,6 +10519,28 @@ function yui_toolbar(attrs = {}, items = []) {
 	updateScrollButtons();
 	return $toolbar;
 }
+/************************************************************
+*  Set or reset the PRESSED state of a toggle.
+*
+*  It lives here, with `yui_toolbar.css`, and not in
+*  `lib_graph.js` where it was born: a pressed toggle is a
+*  TOOLBAR thing, and a stylesheet rides its JS import -- while
+*  the rule sat in the graph's file, an app without a graph got
+*  the class and no paint, which from the outside is a button
+*  that does not work. `lib_graph.js` re-exports it, so every
+*  caller written against that path keeps working.
+*
+*  Written with `querySelectorAll` and not with `addClasses`
+*  from `lib_graph.js` on purpose: importing that would drag
+*  `lib_graph.css` into every toolbar, which is the same trap
+*  the other way round.
+************************************************************/
+function set_pressed_state($container, selector, set) {
+	if (!$container) return;
+	$container.querySelectorAll(selector).forEach(($el) => {
+		$el.classList.toggle("pressed_state", !!set);
+	});
+}
 //#endregion
 //#region src/lib_graph.js
 /***********************************************************************
@@ -10590,19 +10612,6 @@ function set_active_state($container, selector, set) {
 	if (set) addClasses($container, selector, "color_active_state");
 	else removeClasses($container, selector, "color_active_state");
 }
-/************************************************************
-*  Set or reset the 'pressed' state of a TOGGLE.
-*
-*  Not one of the colours above: each of those names a KIND of
-*  action (create, pending, history, destructive), and a toggle
-*  is not an action -- it is a state the control is IN. So it
-*  looks pressed instead of changing category, which also keeps
-*  it out of the way of a neighbour wearing the same hue.
-************************************************************/
-function set_pressed_state($container, selector, set) {
-	if (set) addClasses($container, selector, "pressed_state");
-	else removeClasses($container, selector, "pressed_state");
-}
 /**
 * Returns a smart stroke color in `rgba()` format based on:
 * - The given fill color (hex or rgb[a])
@@ -13406,7 +13415,12 @@ function icon_button$1(gobj, icon, event_name, label_key) {
 *   aimed — reaching the graph from the tree would mean passing
 *   through the text and rebuilding it on the way — so each view gets
 *   its own button and says where it goes.  apply_view_mode() moves
-*   the `is-active` mark.
+*   the `pressed_state` mark -- the library's one way of saying a
+*   toggle is ON, the same the graph toolbars and the treedb legend
+*   use.  It used to be `is-active` with a blue fill of its own: a
+*   STATE wearing a palette colour, which is what the palette does
+*   NOT mean (it names kinds of ACTION), and a third spelling of a
+*   thing the library already had a name for.
 ************************************************************/
 function view_mode_switch$1(gobj) {
 	return [
@@ -13503,7 +13517,7 @@ function apply_view_mode$1(gobj) {
 		if ($el) $el.classList.toggle("is-hidden", mode !== "tree");
 	});
 	if (priv.$mode_btns) for (let [m, $btn] of priv.$mode_btns) {
-		$btn.classList.toggle("is-active", m === mode);
+		$btn.classList.toggle("pressed_state", m === mode);
 		$btn.setAttribute("aria-pressed", m === mode ? "true" : "false");
 	}
 }
@@ -15810,7 +15824,7 @@ function apply_view_mode(gobj) {
 	};
 	for (let [m, $el] of Object.entries(bodies)) if ($el) $el.classList.toggle("is-hidden", m !== mode);
 	if (priv.$mode_btns) for (let [m, $btn] of priv.$mode_btns) {
-		$btn.classList.toggle("is-active", m === mode);
+		$btn.classList.toggle("pressed_state", m === mode);
 		$btn.setAttribute("aria-pressed", m === mode ? "true" : "false");
 	}
 }
@@ -16563,7 +16577,7 @@ function machine_view_switch(gobj) {
 			return [
 				"button",
 				{
-					class: `button is-small GCLASS_MACHINE_VIEW GCLASS_MACHINE_VIEW_${v.mode.toUpperCase()}` + (on ? " is-active" : ""),
+					class: `button is-small GCLASS_MACHINE_VIEW GCLASS_MACHINE_VIEW_${v.mode.toUpperCase()}` + (on ? " pressed_state" : ""),
 					type: "button",
 					"aria-pressed": on ? "true" : "false",
 					title: t(v.key),
@@ -63562,9 +63576,9 @@ function refresh_legend(gobj) {
 		if (is_main && state.main_chosen) extras.push([
 			"button",
 			{
-				class: "GRAPH_LEGEND_STAR button pressed_state",
+				class: "GRAPH_LEGEND_STAR button",
 				type: "button",
-				style: "padding:0 .5rem;",
+				style: "padding:0 .5rem; box-shadow: inset 0 0 0 2px var(--bulma-text, #2e333d);",
 				title: t("main topic"),
 				"data-i18n-title": "main topic",
 				"aria-label": t("main topic"),
@@ -63573,7 +63587,7 @@ function refresh_legend(gobj) {
 			},
 			[[
 				"span",
-				{ style: LEGEND_GLYPH_STYLE },
+				{ style: LEGEND_STAR_MAIN_STYLE },
 				"★"
 			]],
 			{ click: (evt) => {

package/package.json

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

package/src/c_yui_gclass.js

@@ -404,7 +404,7 @@ function apply_view_mode(gobj)
 
     if(priv.$mode_btns) {
         for(let [m, $btn] of priv.$mode_btns) {
-            $btn.classList.toggle('is-active', m === mode);
+            $btn.classList.toggle('pressed_state', m === mode);
             $btn.setAttribute("aria-pressed", (m === mode)? "true": "false");
         }
     }
@@ -983,7 +983,7 @@ function machine_view_switch(gobj)
         let on = (priv.machine_view === v.mode);
         return ['button', {class: 'button is-small GCLASS_MACHINE_VIEW ' +
                                   `GCLASS_MACHINE_VIEW_${v.mode.toUpperCase()}` +
-                                  (on? ' is-active': ''),
+                                  (on? ' pressed_state': ''),
                            type: 'button',
                            'aria-pressed': on? 'true': 'false',
                            title: t(v.key), 'data-i18n-title': v.key,

package/src/c_yui_json.css

@@ -283,19 +283,14 @@
     margin-bottom: 0;
 }
 
-/*  Bulma's `.button.is-active` only borrows the :active border, which on a
- *  three-way switch is not enough to say WHICH view you are looking at.
- *  Fill it instead — the mark has to survive a glance. */
-/*  The raw `--bulma-link` on purpose, and not `-on-scheme`: this is a
- *  FILL. The `-on-scheme` variants exist for a brand colour used as
- *  INK -- they darken it on a light scheme so text can sit on the
- *  page -- and a darkened fill under `link-invert` text is a button
- *  nobody asked for. Ink takes `-on-scheme`; a background takes the
- *  raw token and pairs it with `-invert`.  */
-.C_YUI_JSON .JSON_VIEW_MODE.is-active {
-    background-color: var(--bulma-link, #3273dc);
-    border-color: var(--bulma-link, #3273dc);
-    color: var(--bulma-link-invert, #fff);
+/*  The current view is marked with `pressed_state` (`yui_toolbar.css`),
+ *  which is the library's one way of saying a toggle is ON. This switch
+ *  used to fill itself with `--bulma-link`: right about Bulma's own
+ *  `is-active` being too weak to say WHICH view you are looking at, and
+ *  wrong about the answer -- a colour names a kind of ACTION, and this
+ *  is a STATE. `z-index` is all that is left, so the marked button's
+ *  border wins over its neighbours' in the `has-addons` group.  */
+.C_YUI_JSON .JSON_VIEW_MODE.pressed_state {
     z-index: 1;
 }
 

package/src/c_yui_json.js

@@ -442,7 +442,12 @@ function icon_button(gobj, icon, event_name, label_key)
  *   aimed — reaching the graph from the tree would mean passing
  *   through the text and rebuilding it on the way — so each view gets
  *   its own button and says where it goes.  apply_view_mode() moves
- *   the `is-active` mark.
+ *   the `pressed_state` mark -- the library's one way of saying a
+ *   toggle is ON, the same the graph toolbars and the treedb legend
+ *   use.  It used to be `is-active` with a blue fill of its own: a
+ *   STATE wearing a palette colour, which is what the palette does
+ *   NOT mean (it names kinds of ACTION), and a third spelling of a
+ *   thing the library already had a name for.
  ************************************************************/
 function view_mode_switch(gobj)
 {
@@ -553,7 +558,7 @@ function apply_view_mode(gobj)
 
     if(priv.$mode_btns) {
         for(let [m, $btn] of priv.$mode_btns) {
-            $btn.classList.toggle('is-active', m === mode);
+            $btn.classList.toggle('pressed_state', m === mode);
             $btn.setAttribute("aria-pressed", (m === mode)? "true": "false");
         }
     }

package/src/c_yui_treedb_graph.js

@@ -2632,22 +2632,22 @@ function refresh_legend(gobj)
          *  is a button too: pressing it hands the choice back to the
          *  graph (deduced again). On a deduced one it is a mark.  */
         if(is_main && state.main_chosen) {
-            extras.push(['button', {class: 'GRAPH_LEGEND_STAR button pressed_state',
-                                    type: 'button', style: 'padding:0 .5rem;',
+            /*  MARKED, not pressed -- the same distinction the focused
+             *  chip makes two constants above, and for the same reason
+             *  here: the star IS the gold mark of the main topic, and a
+             *  `pressed_state` repaints the ground under it. 7.23.99
+             *  made the glyph inherit the pressed ink so it could be
+             *  seen at all; that cost the colour, which is what the
+             *  star says. The ring inside the border marks the CHOICE
+             *  and leaves the gold alone.  */
+            extras.push(['button', {class: 'GRAPH_LEGEND_STAR button',
+                                    type: 'button',
+                                    style: 'padding:0 .5rem; ' + LEGEND_FOCUSED_STYLE,
                                     title: t('main topic'), 'data-i18n-title': 'main topic',
                                     'aria-label': t('main topic'),
                                     'data-i18n-aria-label': 'main topic',
                                     'aria-pressed': 'true'},
-                         /*  `LEGEND_GLYPH_STYLE` and not the gold one:
-                          *  `pressed_state` inverts the ground, and an
-                          *  INLINE colour beats the ink it sets with it.
-                          *  The gold then sat on the scheme's own text
-                          *  colour -- 1.06:1 in dark, ~2:1 in light --
-                          *  so the one star the reader CHOSE was the one
-                          *  that could not be seen. `color: inherit`
-                          *  takes the pressed ink, like the crosshair
-                          *  and the `+N` beside it.  */
-                         [['span', {style: LEGEND_GLYPH_STYLE}, '★']], {
+                         [['span', {style: LEGEND_STAR_MAIN_STYLE}, '★']], {
                 click: (evt) => {
                     evt.stopPropagation();
                     gobj_send_event(gobj, "EV_LEGEND_TOPIC",

package/src/lib_graph.css

@@ -471,12 +471,12 @@
     user-select: none;
 }
 
-.button.pressed_state,
-.button.pressed_state:hover {
-    background-color: var(--bulma-text, #2e333d);
-    color: var(--bulma-background, #ffffff);
-    border-color: var(--bulma-text, #2e333d);
-}
+/*  The DOM toolbar's `pressed_state` lives in `yui_toolbar.css` now, and
+ *  not here: a pressed toggle is a TOOLBAR thing, and while the rule sat
+ *  in this file it reached an app only if the app mounted a graph -- the
+ *  stylesheet rides the JS import. yunovatios copied the rule into its
+ *  own `app.css` under a third name for exactly that reason. The G6
+ *  plugin toolbar's own item keeps its rule above, where the plugin is.  */
 
 /*
  *  Touch: the context menu is a LIST OF COMMANDS, and G6 sizes its

package/src/lib_graph.js

@@ -13,6 +13,7 @@ import {
 
 // import {t} from "i18next";
 import "./lib_graph.css";
+import {set_pressed_state} from "./yui_toolbar.js";
 
 /************************************************************
  *  Add class to elements selected
@@ -110,23 +111,12 @@ function set_active_state($container, selector, set)
     }
 }
 
-/************************************************************
- *  Set or reset the 'pressed' state of a TOGGLE.
- *
- *  Not one of the colours above: each of those names a KIND of
- *  action (create, pending, history, destructive), and a toggle
- *  is not an action -- it is a state the control is IN. So it
- *  looks pressed instead of changing category, which also keeps
- *  it out of the way of a neighbour wearing the same hue.
- ************************************************************/
-function set_pressed_state($container, selector, set)
-{
-    if(set) {
-        addClasses($container, selector, "pressed_state");
-    } else {
-        removeClasses($container, selector, "pressed_state");
-    }
-}
+/*  `set_pressed_state` moved to `yui_toolbar.js`, with the rule that
+ *  paints it: a toggle is not one of the colours above -- each of those
+ *  names a KIND of action (create, pending, history, destructive) and a
+ *  toggle is a STATE -- and it belongs to a toolbar, not to a graph. It
+ *  is re-exported below so every caller written against this path keeps
+ *  working.  */
 
 /**
  * Returns a smart stroke color in `rgba()` format based on:

package/src/yui_toolbar.css

@@ -85,3 +85,28 @@ a.flex-horizontal-section { /* To make flex any <a> */
     padding-inline-end: 2rem;
 }
 
+
+/*********************************************************
+ *      A toggle that is ON looks PRESSED
+ *
+ *  A neutral inverted pill, no hue: the toolbar palette names KINDS of
+ *  ACTION (create, pending changes, undo/redo, destructive), and a
+ *  toggle is not an action -- it is a state the control is IN. Without
+ *  a hue it also survives colour blindness and greyscale.
+ *
+ *  NOT Bulma's `.button.is-active`, which shares its declaration with
+ *  `.button:active` (the look of a finger down right now) and only
+ *  shifts the background 10 points of lightness -- 1.27:1 in light,
+ *  1.33:1 in dark, against 9.44:1 / 8.46:1 for this one. A hovered
+ *  button (5 points) lands halfway to it.
+ *
+ *  The `:hover` half is not decoration: without it, hovering a pressed
+ *  button hands it back to Bulma's `.button:hover` and the toggle
+ *  appears to switch off under the pointer.
+ *********************************************************/
+.button.pressed_state,
+.button.pressed_state:hover {
+    background-color: var(--bulma-text, #2e333d);
+    color: var(--bulma-background, #ffffff);
+    border-color: var(--bulma-text, #2e333d);
+}

package/src/yui_toolbar.js

@@ -160,4 +160,30 @@ function yui_toolbar(attrs={}, items = [])
     return $toolbar;
 }
 
-export {yui_toolbar, yui_toolbar_icon, YUI_TOOLBAR_ICON_SIZE};
+/************************************************************
+ *  Set or reset the PRESSED state of a toggle.
+ *
+ *  It lives here, with `yui_toolbar.css`, and not in
+ *  `lib_graph.js` where it was born: a pressed toggle is a
+ *  TOOLBAR thing, and a stylesheet rides its JS import -- while
+ *  the rule sat in the graph's file, an app without a graph got
+ *  the class and no paint, which from the outside is a button
+ *  that does not work. `lib_graph.js` re-exports it, so every
+ *  caller written against that path keeps working.
+ *
+ *  Written with `querySelectorAll` and not with `addClasses`
+ *  from `lib_graph.js` on purpose: importing that would drag
+ *  `lib_graph.css` into every toolbar, which is the same trap
+ *  the other way round.
+ ************************************************************/
+function set_pressed_state($container, selector, set)
+{
+    if(!$container) {
+        return;
+    }
+    $container.querySelectorAll(selector).forEach(($el) => {
+        $el.classList.toggle("pressed_state", !!set);
+    });
+}
+
+export {yui_toolbar, yui_toolbar_icon, YUI_TOOLBAR_ICON_SIZE, set_pressed_state};