@gjsify/example-dom-excalibur-jelly-jumper 0.1.10 → 0.1.12

package/dist/gjs.js

@@ -4151,6 +4151,15 @@ var init_html_element = __esm({
       set oncontextmenu(value2) {
         this[propertyEventListeners].set("oncontextmenu", value2);
       }
+      // Wheel events — Excalibur detects wheel support via
+      // `'onwheel' in document.createElement('div')` and only registers its
+      // wheel listener when the property is present on the prototype chain.
+      get onwheel() {
+        return this[propertyEventListeners].get("onwheel") ?? null;
+      }
+      set onwheel(value2) {
+        this[propertyEventListeners].set("onwheel", value2);
+      }
       // Keyboard events
       get onkeydown() {
         return this[propertyEventListeners].get("onkeydown") ?? null;
@@ -5223,6 +5232,10 @@ var init_document2 = __esm({
       globalThis.dispatchEvent = (event) => _globalEventTarget.dispatchEvent(event);
     }
     defineGlobalIfMissing("devicePixelRatio", 1);
+    defineGlobalIfMissing("scrollX", 0);
+    defineGlobalIfMissing("scrollY", 0);
+    defineGlobalIfMissing("pageXOffset", 0);
+    defineGlobalIfMissing("pageYOffset", 0);
     defineGlobalIfMissing("alert", (...args) => console.error("alert:", ...args));
     if (typeof globalThis.top === "undefined") {
       Object.defineProperty(globalThis, "top", {
@@ -7843,7 +7856,7 @@ function getArgv() {
   try {
     const system = getGjsGlobal().imports?.system;
     if (system?.programArgs) {
-      return [system.programInvocationName || "gjs", ...system.programArgs];
+      return ["gjs", system.programInvocationName || "", ...system.programArgs];
     }
   } catch {
   }
@@ -23083,12 +23096,9 @@ function attachEventControllers(widget, getElement, options) {
   widget.set_can_focus(true);
   const state = { lastX: 0, lastY: 0, buttonsPressed: 0, pressedKeys: /* @__PURE__ */ new Set() };
   const motionCtrl = new Gtk2.EventControllerMotion();
-  motionCtrl.connect("motion", () => {
+  motionCtrl.connect("motion", (_ctrl, x2, y) => {
     const el2 = getElement();
     if (!el2) return;
-    const event = motionCtrl.get_current_event();
-    if (!event) return;
-    const [, x2, y] = event.get_position?.() ?? [false, state.lastX, state.lastY];
     const allocW = widget.get_allocated_width();
     const allocH = widget.get_allocated_height();
     const cx = Math.max(0, Math.min(x2, allocW));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjsify/example-dom-excalibur-jelly-jumper",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "2D platformer showcase using Excalibur.js 0.32.0 with Tiled tilemaps, running natively on GJS/GTK4 and in the browser",
   "main": "dist/gjs.js",
   "type": "module",
@@ -24,23 +24,23 @@
   },
   "devDependencies": {
     "@excaliburjs/plugin-tiled": "0.32.0",
-    "@girs/adw-1": "^1.10.0-4.0.0-rc.2",
-    "@girs/gio-2.0": "^2.88.0-4.0.0-rc.2",
-    "@girs/gjs": "^4.0.0-rc.2",
-    "@girs/glib-2.0": "^2.88.0-4.0.0-rc.2",
-    "@girs/gobject-2.0": "^2.88.0-4.0.0-rc.2",
-    "@girs/gtk-4.0": "^4.23.0-4.0.0-rc.2",
-    "@gjsify/adwaita-icons": "^0.1.10",
-    "@gjsify/adwaita-web": "^0.1.10",
-    "@gjsify/canvas2d": "^0.1.10",
-    "@gjsify/cli": "^0.1.10",
+    "@girs/adw-1": "^1.10.0-4.0.0-rc.3",
+    "@girs/gio-2.0": "^2.88.0-4.0.0-rc.3",
+    "@girs/gjs": "^4.0.0-rc.3",
+    "@girs/glib-2.0": "^2.88.0-4.0.0-rc.3",
+    "@girs/gobject-2.0": "^2.88.0-4.0.0-rc.3",
+    "@girs/gtk-4.0": "^4.23.0-4.0.0-rc.3",
+    "@gjsify/adwaita-icons": "^0.1.12",
+    "@gjsify/adwaita-web": "^0.1.12",
+    "@gjsify/canvas2d": "^0.1.12",
+    "@gjsify/cli": "^0.1.12",
     "@types/node": "^25.6.0",
     "excalibur": "0.32.0",
     "http-server": "^14.1.1",
     "typescript": "^6.0.2"
   },
   "dependencies": {
-    "@gjsify/webgl": "^0.1.10"
+    "@gjsify/webgl": "^0.1.12"
   },
   "author": "Pascal Garber <pascal@artandcode.studio>",
   "license": "MIT"

package/dist/browser.css

@@ -1,505 +0,0 @@
-/* ../../../packages/web/adwaita-fonts/400.css */
-@font-face {
-  font-family: "Adwaita Sans";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url("./adwaita-sans-400-VCQV646T.ttf") format("truetype");
-}
-
-/* ../../../packages/web/adwaita-fonts/index.css */
-
-/* ../../../packages/web/adwaita-web/dist/adwaita-web.css */
-:root {
-  --icon-edit-paste: url("data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cpath%20d%3D'm%207%200%20c%20-0.554688%200%20-1%200.445312%20-1%201%20h%20-2%20c%20-1.644531%200%20-3%201.355469%20-3%203%20v%209%20c%200%201.644531%201.355469%203%203%203%20h%208%20c%201.644531%200%203%20-1.355469%203%20-3%20v%20-9%20c%200%20-1.644531%20-1.355469%20-3%20-3%20-3%20h%20-2%20c%200%20-0.554688%20-0.445312%20-1%20-1%20-1%20z%20m%20-3%203%20h%201%20v%201%20c%200%200.554688%200.445312%201%201%201%20h%204%20c%200.554688%200%201%20-0.445312%201%20-1%20v%20-1%20h%201%20c%200.570312%200%201%200.429688%201%201%20v%209%20c%200%200.570312%20-0.429688%201%20-1%201%20h%20-8%20c%20-0.570312%200%20-1%20-0.429688%20-1%20-1%20v%20-9%20c%200%20-0.570312%200.429688%20-1%201%20-1%20z%20m%200%200'%20fill%3D'currentColor'%2F%3E%20%3C%2Fsvg%3E");
-  --icon-go-down: url("data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cpath%20d%3D'm%201%205%20c%200%20-0.265625%200.105469%20-0.519531%200.292969%20-0.707031%20c%200.390625%20-0.390625%201.023437%20-0.390625%201.414062%200%20l%205.292969%205.292969%20l%205.292969%20-5.292969%20c%200.390625%20-0.390625%201.023437%20-0.390625%201.414062%200%20c%200.1875%200.1875%200.292969%200.441406%200.292969%200.707031%20s%20-0.105469%200.519531%20-0.292969%200.707031%20l%20-6%206%20c%20-0.390625%200.390625%20-1.023437%200.390625%20-1.414062%200%20l%20-6%20-6%20c%20-0.1875%20-0.1875%20-0.292969%20-0.441406%20-0.292969%20-0.707031%20z%20m%200%200'%20fill%3D'currentColor'%2F%3E%20%3C%2Fsvg%3E");
-  --icon-sidebar-show: url("data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cg%20fill%3D'currentColor'%3E%20%3Cpath%20d%3D'm%206%2013%20v%20-10%20h%20-3%20c%20-0.550781%200%20-1%200.449219%20-1%201%20v%208%20c%200%200.550781%200.449219%201%201%201%20z%20m%200%200'%20fill-opacity%3D'0.34902'%2F%3E%20%3Cpath%20d%3D'm%203%201%20c%20-1.644531%200%20-3%201.355469%20-3%203%20v%208%20c%200%201.644531%201.355469%203%203%203%20h%2010%20c%201.644531%200%203%20-1.355469%203%20-3%20v%20-8%20c%200%20-1.644531%20-1.355469%20-3%20-3%20-3%20z%20m%200%202%20h%203%20v%2010%20h%20-3%20c%20-0.570312%200%20-1%20-0.429688%20-1%20-1%20v%20-8%20c%200%20-0.570312%200.429688%20-1%201%20-1%20z%20m%204%200%20h%206%20c%200.570312%200%201%200.429688%201%201%20v%208%20c%200%200.570312%20-0.429688%201%20-1%201%20h%20-6%20z%20m%200%200'%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");
-}
-:root {
-  --window-bg-color: #fafafb;
-  --window-fg-color: rgba(0, 0, 6, 0.8);
-  --view-bg-color: #ffffff;
-  --view-fg-color: rgba(0, 0, 6, 0.8);
-  --headerbar-bg-color: #ffffff;
-  --headerbar-fg-color: rgba(0, 0, 6, 0.8);
-  --headerbar-shade-color: rgba(0, 0, 6, 0.12);
-  --sidebar-bg-color: #ebebed;
-  --card-bg-color: #ffffff;
-  --card-fg-color: rgba(0, 0, 6, 0.8);
-  --card-shade-color: rgba(0, 0, 6, 0.07);
-  --accent-bg-color: #3584e4;
-  --accent-fg-color: #ffffff;
-  --accent-color: #1c71d8;
-  --switch-off-bg: rgba(0, 0, 0, 0.2);
-  --switch-knob-bg: #ffffff;
-  --window-radius: 15px;
-  --card-radius: 12px;
-  --button-radius: 9px;
-  --spacing-xs: 6px;
-  --spacing-s: 9px;
-  --spacing-m: 12px;
-  --spacing-l: 18px;
-  --spacing-xl: 24px;
-  --font-family:
-    "Adwaita Sans",
-    "Cantarell",
-    "Inter",
-    "Segoe UI",
-    sans-serif;
-  --font-size-base: 11pt;
-  --font-size-small: 9pt;
-  --font-size-heading: 12pt;
-  --dim-opacity: 0.55;
-}
-@media (prefers-color-scheme: dark) {
-  :root:not(.theme-light) {
-    --window-bg-color: #222226;
-    --window-fg-color: #ffffff;
-    --view-bg-color: #1d1d20;
-    --view-fg-color: #ffffff;
-    --headerbar-bg-color: #2e2e32;
-    --headerbar-fg-color: #ffffff;
-    --headerbar-shade-color: rgba(0, 0, 6, 0.36);
-    --sidebar-bg-color: #2e2e32;
-    --card-bg-color: rgba(255, 255, 255, 0.08);
-    --card-fg-color: #ffffff;
-    --card-shade-color: rgba(0, 0, 6, 0.36);
-    --accent-color: #78aeed;
-    --switch-off-bg: rgba(255, 255, 255, 0.2);
-    --switch-knob-bg: #deddda;
-  }
-}
-:root.theme-dark {
-  --window-bg-color: #222226;
-  --window-fg-color: #ffffff;
-  --view-bg-color: #1d1d20;
-  --view-fg-color: #ffffff;
-  --headerbar-bg-color: #2e2e32;
-  --headerbar-fg-color: #ffffff;
-  --headerbar-shade-color: rgba(0, 0, 6, 0.36);
-  --sidebar-bg-color: #2e2e32;
-  --card-bg-color: rgba(255, 255, 255, 0.08);
-  --card-fg-color: #ffffff;
-  --card-shade-color: rgba(0, 0, 6, 0.36);
-  --accent-color: #78aeed;
-  --switch-off-bg: rgba(255, 255, 255, 0.2);
-  --switch-knob-bg: #deddda;
-}
-adw-window {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--window-bg-color);
-  color: var(--window-fg-color);
-  font-family: var(--font-family);
-  font-size: var(--font-size-base);
-  border-radius: var(--window-radius);
-  box-shadow:
-    0 0 14px 5px rgba(0, 0, 0, 0.15),
-    0 0 5px 2px rgba(0, 0, 0, 0.1),
-    0 0 0 1px rgba(0, 0, 0, 0.05);
-  overflow: hidden;
-  outline: 1px solid rgba(255, 255, 255, 0.07);
-  outline-offset: -1px;
-}
-adw-header-bar {
-  display: flex;
-  align-items: center;
-  min-height: 47px;
-  padding: 0 6px;
-  background-color: var(--headerbar-bg-color);
-  color: var(--headerbar-fg-color);
-  box-shadow: inset 0 -1px var(--headerbar-shade-color);
-  flex-shrink: 0;
-}
-adw-header-bar .adw-header-bar-center {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-}
-adw-header-bar .adw-header-bar-title {
-  font-weight: bold;
-  font-size: var(--font-size-base);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-adw-header-bar .adw-header-bar-start {
-  display: flex;
-  align-items: center;
-  padding: 0 6px;
-  gap: 4px;
-}
-adw-header-bar .adw-header-bar-end {
-  display: flex;
-  align-items: center;
-  padding: 0 6px;
-  gap: 4px;
-}
-adw-header-bar .adw-header-btn {
-  position: relative;
-  width: 34px;
-  height: 34px;
-  border: none;
-  border-radius: var(--button-radius);
-  background: transparent;
-  color: var(--headerbar-fg-color);
-  cursor: pointer;
-  padding: 0;
-  margin: 0;
-  flex-shrink: 0;
-}
-adw-header-bar .adw-header-btn:hover {
-  background: rgba(128, 128, 128, 0.12);
-}
-adw-header-bar .adw-header-btn:active {
-  background: rgba(128, 128, 128, 0.22);
-}
-adw-preferences-group {
-  display: block;
-}
-adw-preferences-group .adw-preferences-group-header {
-  padding: var(--spacing-xs) 2px;
-}
-adw-preferences-group .adw-preferences-group-title {
-  font-size: var(--font-size-small);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  opacity: var(--dim-opacity);
-  margin: 0;
-  color: var(--window-fg-color);
-}
-adw-preferences-group .adw-preferences-group-listbox {
-  background-color: var(--card-bg-color);
-  color: var(--card-fg-color);
-  border-radius: var(--card-radius);
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 6, 0.03),
-    0 1px 3px 1px rgba(0, 0, 6, 0.07),
-    0 2px 6px 2px rgba(0, 0, 6, 0.03);
-  overflow: hidden;
-}
-adw-card,
-.adw-card {
-  display: block;
-  background-color: var(--card-bg-color);
-  color: var(--card-fg-color);
-  border-radius: var(--card-radius);
-  padding: var(--spacing-l);
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 6, 0.03),
-    0 1px 3px 1px rgba(0, 0, 6, 0.07),
-    0 2px 6px 2px rgba(0, 0, 6, 0.03);
-  overflow: hidden;
-}
-adw-switch-row,
-adw-combo-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 50px;
-  padding: var(--spacing-s) var(--spacing-m);
-  gap: var(--spacing-m);
-  border-bottom: 1px solid var(--card-shade-color);
-}
-adw-switch-row:last-child,
-adw-combo-row:last-child {
-  border-bottom: none;
-}
-.adw-separator-vertical {
-  width: 1px;
-  align-self: stretch;
-  background-color: var(--card-shade-color);
-  flex-shrink: 0;
-}
-adw-switch-row .adw-row-title {
-  flex: 1;
-  font-size: var(--font-size-base);
-  color: var(--card-fg-color);
-}
-adw-switch-row .adw-switch {
-  position: relative;
-  display: inline-block;
-  width: 44px;
-  height: 24px;
-  flex-shrink: 0;
-}
-adw-switch-row .adw-switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-  position: absolute;
-}
-adw-switch-row .adw-switch-slider {
-  position: absolute;
-  cursor: pointer;
-  inset: 0;
-  background-color: var(--switch-off-bg);
-  border-radius: 12px;
-  transition: background-color 0.15s ease-out;
-}
-adw-switch-row .adw-switch-slider::before {
-  content: "";
-  position: absolute;
-  height: 20px;
-  width: 20px;
-  left: 2px;
-  bottom: 2px;
-  background-color: var(--switch-knob-bg);
-  border-radius: 50%;
-  transition: transform 0.15s ease-out;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-}
-adw-switch-row .adw-switch input:checked + .adw-switch-slider {
-  background-color: var(--accent-bg-color);
-}
-adw-switch-row .adw-switch input:checked + .adw-switch-slider::before {
-  transform: translateX(20px);
-}
-adw-switch-row .adw-switch input:focus-visible + .adw-switch-slider {
-  outline: 2px solid var(--accent-color);
-  outline-offset: 2px;
-}
-adw-combo-row {
-  position: relative;
-  cursor: pointer;
-}
-adw-combo-row .adw-row-title {
-  font-size: var(--font-size-base);
-  color: var(--card-fg-color);
-  pointer-events: none;
-}
-adw-combo-row select {
-  appearance: none;
-  -webkit-appearance: none;
-  background-color: transparent;
-  border: none;
-  padding: 6px 24px 6px 8px;
-  font-family: var(--font-family);
-  font-size: var(--font-size-base);
-  color: var(--card-fg-color);
-  cursor: pointer;
-  text-align: right;
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-}
-adw-combo-row select:focus-visible {
-  outline: 2px solid var(--accent-color);
-  outline-offset: -1px;
-}
-adw-combo-row select option {
-  background-color: var(--window-bg-color);
-  color: var(--window-fg-color);
-}
-adw-combo-row .adw-row-value {
-  font-size: var(--font-size-base);
-  color: var(--card-fg-color);
-  opacity: var(--dim-opacity);
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-adw-combo-row .adw-row-value::after {
-  content: "";
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  background-color: currentColor;
-  -webkit-mask-image: var(--icon-go-down);
-  mask-image: var(--icon-go-down);
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-size: contain;
-  mask-size: contain;
-  -webkit-mask-position: center;
-  mask-position: center;
-}
-adw-spin-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 50px;
-  padding: var(--spacing-s) var(--spacing-m);
-  gap: var(--spacing-m);
-  border-bottom: 1px solid var(--card-shade-color);
-}
-adw-spin-row:last-child {
-  border-bottom: none;
-}
-adw-spin-row .adw-row-title {
-  flex: 1;
-  font-size: var(--font-size-base);
-  color: var(--card-fg-color);
-}
-.adw-spin-control {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-.adw-spin-control button {
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: var(--button-radius);
-  background: transparent;
-  color: var(--card-fg-color);
-  cursor: pointer;
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-.adw-spin-control button:hover {
-  background: rgba(128, 128, 128, 0.15);
-}
-.adw-spin-control input {
-  width: 56px;
-  text-align: center;
-  border: none;
-  border-radius: var(--button-radius);
-  background: rgba(128, 128, 128, 0.1);
-  color: var(--card-fg-color);
-  font-family: var(--font-family);
-  font-size: var(--font-size-base);
-  padding: 4px 2px;
-}
-.adw-spin-control input:focus {
-  outline: 2px solid var(--accent-color);
-  outline-offset: -1px;
-}
-adw-toast-overlay {
-  position: fixed;
-  bottom: 24px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 9999;
-  display: flex;
-  flex-direction: column-reverse;
-  gap: 9px;
-  align-items: center;
-  pointer-events: none;
-}
-.adw-toast {
-  background-color: #3d3846;
-  color: #ffffff;
-  padding: 9px 12px;
-  border-radius: var(--card-radius);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.25);
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  width: max-content;
-  max-width: 400px;
-  min-height: 36px;
-  pointer-events: auto;
-  font-family: var(--font-family);
-  font-size: var(--font-size-base);
-  opacity: 0;
-  transform: translateY(100%) scale(0.9);
-  transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1);
-  will-change: transform, opacity;
-}
-.adw-toast.visible {
-  opacity: 1;
-  transform: translateY(0) scale(1);
-}
-.adw-toast.hiding {
-  opacity: 0;
-  transform: translateY(100%) scale(0.9);
-  transition-duration: 0.15s;
-  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
-}
-.adw-toast .adw-toast-title {
-  font-weight: normal;
-  line-height: 1.3;
-}
-adw-overlay-split-view {
-  display: flex;
-  flex-direction: row;
-  flex: 1;
-  min-height: 0;
-  position: relative;
-  overflow: hidden;
-}
-adw-overlay-split-view .adw-osv-sidebar {
-  background-color: var(--sidebar-bg-color);
-  overflow-y: auto;
-  flex-shrink: 0;
-  transition:
-    transform 0.2s ease,
-    opacity 0.2s ease,
-    margin 0.2s ease;
-  z-index: 10;
-  align-self: stretch;
-}
-adw-overlay-split-view .adw-osv-content {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  align-self: stretch;
-}
-adw-overlay-split-view:not(.collapsed) .adw-osv-sidebar {
-  position: relative;
-}
-adw-overlay-split-view:not(.collapsed):not(.show-sidebar) .adw-osv-sidebar {
-  transform: translateX(-100%);
-  opacity: 0;
-  pointer-events: none;
-}
-adw-overlay-split-view.collapsed .adw-osv-sidebar {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  transform: translateX(-100%);
-  opacity: 0;
-  pointer-events: none;
-}
-adw-overlay-split-view.collapsed.sidebar-end .adw-osv-sidebar {
-  left: auto;
-  right: 0;
-  transform: translateX(100%);
-}
-adw-overlay-split-view.collapsed.show-sidebar .adw-osv-sidebar {
-  transform: translateX(0);
-  opacity: 1;
-  pointer-events: auto;
-}
-adw-overlay-split-view .adw-osv-backdrop {
-  display: none;
-}
-adw-overlay-split-view.collapsed.show-sidebar .adw-osv-backdrop {
-  display: block;
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.3);
-  z-index: 9;
-}
-.adw-sidebar-content {
-  padding: var(--spacing-m);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-m);
-}
-.adw-sidebar-toggle-icon::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background-color: currentColor;
-  -webkit-mask-image: var(--icon-sidebar-show);
-  mask-image: var(--icon-sidebar-show);
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-size: 16px 16px;
-  mask-size: 16px 16px;
-  -webkit-mask-position: center;
-  mask-position: center;
-  pointer-events: none;
-}