@yuneta/gobj-ui 7.23.101 → 7.23.103

package/dist/gobj-ui.cjs.js

@@ -13420,12 +13420,11 @@ 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 `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.
+*   the `selected_state` mark -- the library's one way of saying
+*   WHICH segment of a selector is chosen, filled with the link
+*   colour.  It used to be `is-active` with a fill written here: the
+*   right idea, spelled a third time.  A toggle, which has no "which
+*   one" to answer, wears the neutral `pressed_state` pill instead.
 ************************************************************/
 function view_mode_switch$1(gobj) {
 	return [
@@ -13522,7 +13521,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("pressed_state", m === mode);
+		$btn.classList.toggle("selected_state", m === mode);
 		$btn.setAttribute("aria-pressed", m === mode ? "true" : "false");
 	}
 }
@@ -15829,7 +15828,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("pressed_state", m === mode);
+		$btn.classList.toggle("selected_state", m === mode);
 		$btn.setAttribute("aria-pressed", m === mode ? "true" : "false");
 	}
 }
@@ -16582,7 +16581,7 @@ function machine_view_switch(gobj) {
 			return [
 				"button",
 				{
-					class: `button is-small GCLASS_MACHINE_VIEW GCLASS_MACHINE_VIEW_${v.mode.toUpperCase()}` + (on ? " pressed_state" : ""),
+					class: `button is-small GCLASS_MACHINE_VIEW GCLASS_MACHINE_VIEW_${v.mode.toUpperCase()}` + (on ? " selected_state" : ""),
 					type: "button",
 					"aria-pressed": on ? "true" : "false",
 					title: (0, i18next.t)(v.key),
@@ -62402,7 +62401,7 @@ function refresh_node_shape_buttons(gobj, $root) {
 	let labels = (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "node_labels");
 	for (let $btn of $root.querySelectorAll(".GRAPH_NODE_MODE_BTN")) {
 		let on = $btn.getAttribute("data-mode") === mode;
-		$btn.classList.toggle("pressed_state", on);
+		$btn.classList.toggle("selected_state", on);
 		$btn.setAttribute("aria-pressed", on ? "true" : "false");
 	}
 	set_pressed_state($root, ".GRAPH_NODE_LABELS", labels);
@@ -71055,11 +71054,18 @@ function repaint(gobj) {
 	let mode = cur_mode(gobj);
 	for (let m of priv.modes) {
 		if (!m.$btn) continue;
-		m.$btn.classList.toggle("is-active", m === mode);
-		m.$btn.classList.toggle("is-link", m === mode && !m.overflow);
+		let on = m === mode;
+		if (m.overflow) {
+			m.$btn.classList.toggle("is-active", on);
+			if (on) m.$btn.setAttribute("aria-current", "true");
+			else m.$btn.removeAttribute("aria-current");
+		} else {
+			m.$btn.classList.toggle("selected_state", on);
+			m.$btn.setAttribute("aria-pressed", on ? "true" : "false");
+		}
 	}
 	if (mode && mode.$btn) scroll_mode_into_view(gobj, mode.$btn);
-	if (priv.$more) priv.$more.classList.toggle("is-link", !!(mode && mode.overflow));
+	if (priv.$more) priv.$more.classList.toggle("selected_state", !!(mode && mode.overflow));
 	let is_bucket = !!(mode && mode.kind === "bucket");
 	priv.$nav.classList.toggle("yui-period-nav-off", !is_bucket);
 	priv.$label.disabled = !is_bucket;
@@ -71250,9 +71256,10 @@ function cell_button(gobj, label, anchor_ms, selected, logical, aria) {
 	let $btn = (0, _yuneta_gobj_js.createElement2)([
 		"button",
 		{
-			class: `button is-small ${selected ? "is-link" : "is-ghost"} ${logical}`,
+			class: `button is-small ${selected ? "selected_state" : "is-ghost"} ${logical}`,
 			type: "button",
 			style: "width:100%;",
+			...selected ? { "aria-current": "date" } : {},
 			title: aria || "",
 			"aria-label": aria || ""
 		},

package/dist/gobj-ui.es.js

@@ -13415,12 +13415,11 @@ 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 `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.
+*   the `selected_state` mark -- the library's one way of saying
+*   WHICH segment of a selector is chosen, filled with the link
+*   colour.  It used to be `is-active` with a fill written here: the
+*   right idea, spelled a third time.  A toggle, which has no "which
+*   one" to answer, wears the neutral `pressed_state` pill instead.
 ************************************************************/
 function view_mode_switch$1(gobj) {
 	return [
@@ -13517,7 +13516,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("pressed_state", m === mode);
+		$btn.classList.toggle("selected_state", m === mode);
 		$btn.setAttribute("aria-pressed", m === mode ? "true" : "false");
 	}
 }
@@ -15824,7 +15823,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("pressed_state", m === mode);
+		$btn.classList.toggle("selected_state", m === mode);
 		$btn.setAttribute("aria-pressed", m === mode ? "true" : "false");
 	}
 }
@@ -16577,7 +16576,7 @@ function machine_view_switch(gobj) {
 			return [
 				"button",
 				{
-					class: `button is-small GCLASS_MACHINE_VIEW GCLASS_MACHINE_VIEW_${v.mode.toUpperCase()}` + (on ? " pressed_state" : ""),
+					class: `button is-small GCLASS_MACHINE_VIEW GCLASS_MACHINE_VIEW_${v.mode.toUpperCase()}` + (on ? " selected_state" : ""),
 					type: "button",
 					"aria-pressed": on ? "true" : "false",
 					title: t(v.key),
@@ -62397,7 +62396,7 @@ function refresh_node_shape_buttons(gobj, $root) {
 	let labels = gobj_read_bool_attr(gobj, "node_labels");
 	for (let $btn of $root.querySelectorAll(".GRAPH_NODE_MODE_BTN")) {
 		let on = $btn.getAttribute("data-mode") === mode;
-		$btn.classList.toggle("pressed_state", on);
+		$btn.classList.toggle("selected_state", on);
 		$btn.setAttribute("aria-pressed", on ? "true" : "false");
 	}
 	set_pressed_state($root, ".GRAPH_NODE_LABELS", labels);
@@ -71050,11 +71049,18 @@ function repaint(gobj) {
 	let mode = cur_mode(gobj);
 	for (let m of priv.modes) {
 		if (!m.$btn) continue;
-		m.$btn.classList.toggle("is-active", m === mode);
-		m.$btn.classList.toggle("is-link", m === mode && !m.overflow);
+		let on = m === mode;
+		if (m.overflow) {
+			m.$btn.classList.toggle("is-active", on);
+			if (on) m.$btn.setAttribute("aria-current", "true");
+			else m.$btn.removeAttribute("aria-current");
+		} else {
+			m.$btn.classList.toggle("selected_state", on);
+			m.$btn.setAttribute("aria-pressed", on ? "true" : "false");
+		}
 	}
 	if (mode && mode.$btn) scroll_mode_into_view(gobj, mode.$btn);
-	if (priv.$more) priv.$more.classList.toggle("is-link", !!(mode && mode.overflow));
+	if (priv.$more) priv.$more.classList.toggle("selected_state", !!(mode && mode.overflow));
 	let is_bucket = !!(mode && mode.kind === "bucket");
 	priv.$nav.classList.toggle("yui-period-nav-off", !is_bucket);
 	priv.$label.disabled = !is_bucket;
@@ -71245,9 +71251,10 @@ function cell_button(gobj, label, anchor_ms, selected, logical, aria) {
 	let $btn = createElement2([
 		"button",
 		{
-			class: `button is-small ${selected ? "is-link" : "is-ghost"} ${logical}`,
+			class: `button is-small ${selected ? "selected_state" : "is-ghost"} ${logical}`,
 			type: "button",
 			style: "width:100%;",
+			...selected ? { "aria-current": "date" } : {},
 			title: aria || "",
 			"aria-label": aria || ""
 		},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.101",
+  "version": "7.23.103",
   "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('pressed_state', m === mode);
+            $btn.classList.toggle('selected_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? ' pressed_state': ''),
+                                  (on? ' selected_state': ''),
                            type: 'button',
                            'aria-pressed': on? 'true': 'false',
                            title: t(v.key), 'data-i18n-title': v.key,

package/src/c_yui_json.css

@@ -283,14 +283,14 @@
     margin-bottom: 0;
 }
 
-/*  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 {
+/*  The current view is marked with `selected_state` (`yui_toolbar.css`):
+ *  the library's one way of saying WHICH segment of a selector is
+ *  chosen. This switch used to write that fill here itself -- the right
+ *  idea in the wrong place, since the same question is answered by the
+ *  graph's node modes, the map's modes and the period's granularities.
+ *  `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.selected_state {
     z-index: 1;
 }
 

package/src/c_yui_json.js

@@ -442,12 +442,11 @@ 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 `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.
+ *   the `selected_state` mark -- the library's one way of saying
+ *   WHICH segment of a selector is chosen, filled with the link
+ *   colour.  It used to be `is-active` with a fill written here: the
+ *   right idea, spelled a third time.  A toggle, which has no "which
+ *   one" to answer, wears the neutral `pressed_state` pill instead.
  ************************************************************/
 function view_mode_switch(gobj)
 {
@@ -558,7 +557,7 @@ function apply_view_mode(gobj)
 
     if(priv.$mode_btns) {
         for(let [m, $btn] of priv.$mode_btns) {
-            $btn.classList.toggle('pressed_state', m === mode);
+            $btn.classList.toggle('selected_state', m === mode);
             $btn.setAttribute("aria-pressed", (m === mode)? "true": "false");
         }
     }

package/src/c_yui_period.js

@@ -96,6 +96,10 @@ import {
 
 import i18next, {t} from "i18next";
 
+/*  `yui_toolbar.css` for `selected_state`: the mark of the chosen
+ *  segment of a selector lives with the toolbar, and a stylesheet
+ *  rides its import.  */
+import "./yui_toolbar.css";
 import "./c_yui_period.css";
 
 
@@ -699,12 +703,30 @@ function repaint(gobj)
     let priv = gobj.priv;
     let mode = cur_mode(gobj);
 
+    /*  This is a SELECTOR -- one granularity of several -- so the
+     *  chosen segment is FILLED (`selected_state`, `yui_toolbar.css`),
+     *  the same mark the graph's node modes and the map's modes wear.
+     *  An overflow granularity is a `dropdown-item` and not a button,
+     *  and there `is-active` is Bulma's own mark for the current item
+     *  of a menu -- which is exactly what it is.  */
     for(let m of priv.modes) {
         if(!m.$btn) {
             continue;
         }
-        m.$btn.classList.toggle("is-active", m === mode);
-        m.$btn.classList.toggle("is-link", m === mode && !m.overflow);
+        let on = (m === mode);
+        if(m.overflow) {
+            m.$btn.classList.toggle("is-active", on);
+            /*  `aria-current` and not `aria-pressed`: the item is a link
+             *  in a menu, and `aria-pressed` belongs to a button.  */
+            if(on) {
+                m.$btn.setAttribute("aria-current", "true");
+            } else {
+                m.$btn.removeAttribute("aria-current");
+            }
+        } else {
+            m.$btn.classList.toggle("selected_state", on);
+            m.$btn.setAttribute("aria-pressed", on? "true" : "false");
+        }
     }
     if(mode && mode.$btn) {
         scroll_mode_into_view(gobj, mode.$btn);
@@ -713,7 +735,7 @@ function repaint(gobj)
         /*  An overflow granularity in use must SAY so on the trigger: the
          *  control shows no active segment otherwise, and the user cannot
          *  tell a quarter from a month by the arrows alone.  */
-        priv.$more.classList.toggle("is-link", !!(mode && mode.overflow));
+        priv.$more.classList.toggle("selected_state", !!(mode && mode.overflow));
     }
 
     /*  The navigator STAYS, disabled, in the modes with nothing to walk: it
@@ -991,8 +1013,12 @@ function cell_button(gobj, label, anchor_ms, selected, logical, aria)
      *  year around it.  */
     let $btn = createElement2(
         /*  The ONE place `is-small` is earned: 42 cells in a popover.  */
-        ["button", {class: `button is-small ${selected? "is-link" : "is-ghost"} ${logical}`,
+        /*  The picked instant is the chosen one of a grid of 42, which
+         *  is the selector's question and not a toggle's, so it takes
+         *  the same fill. `aria-current="date"` says it to a reader.  */
+        ["button", {class: `button is-small ${selected? "selected_state" : "is-ghost"} ${logical}`,
                     type: "button", style: "width:100%;",
+                    ...(selected? {"aria-current": "date"} : {}),
                     title: aria || "", "aria-label": aria || ""}, String(label)]);
     $btn.addEventListener("click", () => {
         gobj_send_event(gobj, "EV_DATE_PICKED", {anchor: anchor_ms}, gobj);

package/src/c_yui_treedb_graph.js

@@ -652,9 +652,13 @@ function refresh_node_shape_buttons(gobj, $root)
         mode = 'expanded';
     }
     let labels = gobj_read_bool_attr(gobj, "node_labels");
+    /*  A SELECTOR, not a toggle: it picks one of three views, so the
+     *  chosen segment is FILLED (`selected_state`) and not drawn as a
+     *  pressed pill. The labels button below IS a toggle -- on or off,
+     *  no "which one" -- and keeps the pill.  */
     for(let $btn of $root.querySelectorAll('.GRAPH_NODE_MODE_BTN')) {
         let on = ($btn.getAttribute('data-mode') === mode);
-        $btn.classList.toggle('pressed_state', on);
+        $btn.classList.toggle('selected_state', on);
         $btn.setAttribute('aria-pressed', on? 'true' : 'false');
     }
     set_pressed_state($root, '.GRAPH_NODE_LABELS', labels);

package/src/yui_toolbar.css

@@ -110,3 +110,36 @@ a.flex-horizontal-section { /* To make flex any <a> */
     color: var(--bulma-background, #ffffff);
     border-color: var(--bulma-text, #2e333d);
 }
+
+/*********************************************************
+ *      The CHOSEN segment of a selector is FILLED
+ *
+ *  Two different controls, two different marks, and telling them apart
+ *  is the whole point:
+ *
+ *    - a TOGGLE is on or off, and looks PRESSED (above) -- a neutral
+ *      pill, no hue, because there is no "which one" to answer;
+ *    - a SELECTOR picks ONE of N, and the chosen segment is FILLED with
+ *      the link colour. A hue is what the eye finds in a row of
+ *      identical grey buttons: measured against the button's own ground
+ *      the fill is 5.14:1 in light and 3.53:1 in dark -- less luminance
+ *      than the pressed pill (9.44 / 8.46) and a different HUE, which
+ *      is what says "this one, of these".
+ *
+ *  The raw `--bulma-link` 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`.
+ *
+ *  `:hover` for the same reason as the pressed rule: without it, Bulma's
+ *  `.button:hover` takes the fill back and the chosen segment appears to
+ *  come unchosen under the pointer.
+ *********************************************************/
+.button.selected_state,
+.button.selected_state:hover {
+    background-color: var(--bulma-link, #3273dc);
+    border-color: var(--bulma-link, #3273dc);
+    color: var(--bulma-link-invert, #fff);
+}

package/src/yui_toolbar.js

@@ -186,4 +186,25 @@ function set_pressed_state($container, selector, set)
     });
 }
 
-export {yui_toolbar, yui_toolbar_icon, YUI_TOOLBAR_ICON_SIZE, set_pressed_state};
+/************************************************************
+ *  Set or reset the CHOSEN state of one segment of a selector.
+ *
+ *  Not the same control as a toggle, and not the same mark: a
+ *  toggle is on or off and looks pressed (a neutral pill, no
+ *  hue, because there is no "which one" to answer); a selector
+ *  picks ONE of N and fills the chosen segment with the link
+ *  colour, which is what the eye finds in a row of identical
+ *  grey buttons. See `yui_toolbar.css` for the measurements.
+ ************************************************************/
+function set_selected_state($container, selector, set)
+{
+    if(!$container) {
+        return;
+    }
+    $container.querySelectorAll(selector).forEach(($el) => {
+        $el.classList.toggle("selected_state", !!set);
+    });
+}
+
+export {yui_toolbar, yui_toolbar_icon, YUI_TOOLBAR_ICON_SIZE,
+        set_pressed_state, set_selected_state};