@rogieking/figui3 2.19.1 → 2.20.0

package/components.css

@@ -305,73 +305,37 @@
   --icon-rotate: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2325 6.47442C11.2088 5.49811 12.7917 5.49811 13.768 6.47442L15.2931 7.99955H14.0002C13.7241 7.99955 13.5002 8.2234 13.5002 8.49955C13.5002 8.77569 13.7241 8.99955 14.0002 8.99955H16.5002C16.7764 8.99955 17.0002 8.77569 17.0002 8.49955V5.99955C17.0002 5.7234 16.7764 5.49955 16.5002 5.49955C16.2241 5.49955 16.0002 5.7234 16.0002 5.99955V7.29244L14.4751 5.76731C13.1083 4.40048 10.8922 4.40048 9.52537 5.76731L7.14669 8.14599C6.95143 8.34126 6.95143 8.65784 7.14669 8.8531C7.34195 9.04836 7.65854 9.04836 7.8538 8.8531L10.2325 6.47442ZM13.0609 9.64599C12.4751 9.06021 11.5254 9.06021 10.9396 9.64599L7.64669 12.9389C7.06091 13.5247 7.0609 14.4744 7.64669 15.0602L10.9396 18.3531C11.5254 18.9389 12.4751 18.9389 13.0609 18.3531L16.3538 15.0602C16.9396 14.4744 16.9396 13.5247 16.3538 12.9389L13.0609 9.64599ZM11.6467 10.3531C11.842 10.1578 12.1585 10.1578 12.3538 10.3531L15.6467 13.646C15.842 13.8413 15.842 14.1578 15.6467 14.3531L12.3538 17.646C12.1585 17.8413 11.842 17.8413 11.6467 17.646L8.3538 14.3531C8.15854 14.1578 8.15854 13.8413 8.3538 13.646L11.6467 10.3531Z' fill='currentColor'/%3E%3C/svg%3E");
   --icon-swap: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.35355 6.35355C8.54882 6.15829 8.54882 5.84171 8.35355 5.64645C8.15829 5.45118 7.84171 5.45118 7.64645 5.64645L5.14645 8.14645C4.95118 8.34171 4.95118 8.65829 5.14645 8.85355L7.64645 11.3536C7.84171 11.5488 8.15829 11.5488 8.35355 11.3536C8.54882 11.1583 8.54882 10.8417 8.35355 10.6464L6.70711 9H18.5C18.7761 9 19 8.77614 19 8.5C19 8.22386 18.7761 8 18.5 8H6.70711L8.35355 6.35355ZM15.6464 13.3536C15.4512 13.1583 15.4512 12.8417 15.6464 12.6464C15.8417 12.4512 16.1583 12.4512 16.3536 12.6464L18.8536 15.1464C19.0488 15.3417 19.0488 15.6583 18.8536 15.8536L16.3536 18.3536C16.1583 18.5488 15.8417 18.5488 15.6464 18.3536C15.4512 18.1583 15.4512 17.8417 15.6464 17.6464L17.2929 16H5.5C5.22386 16 5 15.7761 5 15.5C5 15.2239 5.22386 15 5.5 15H17.2929L15.6464 13.3536Z' fill='currentColor'/%3E%3C/svg%3E");
 
-  /* Elevations - light theme defaults */
-  --figma-elevation-500-modal-window:
-    0 0 0.5px 0 rgba(0, 0, 0, 0.08), 0 10px 24px 0 rgba(0, 0, 0, 0.18),
-    0 2px 5px 0 rgba(0, 0, 0, 0.15);
-
+  /* Elevations — light-dark() handles theme switching inline */
   --figma-elevation-100:
-    0px 0px 0.5px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
+    0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)),
+    inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.1)),
+    0px 1px 3px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
+
   --figma-elevation-200:
-    0 0 0.5px 0 rgba(0, 0, 0, 0.18), 0 3px 8px 0 rgba(0, 0, 0, 0.1),
-    0 1px 3px 0 rgba(0, 0, 0, 0.1);
+    0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.18), transparent),
+    0px 3px 8px 0px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35)),
+    0px 1px 3px 0px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)),
+    inset 0px 0.5px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.08)),
+    inset 0px 0px 0.5px 0px light-dark(transparent, rgba(255, 255, 255, 0.3));
+
   --figma-elevation-400-menu-panel:
-    0px 0px 0.5px 0px rgba(0, 0, 0, 0.12),
-    0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
+    0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.12), transparent),
+    0px 10px 16px 0px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.35)),
+    0px 2px 5px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.35)),
+    inset 0px 0.5px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.08)),
+    inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.075));
+
   --figma-elevation-500-modal-window:
-    0px 0px 0.5px 0px rgba(0, 0, 0, 0.08),
-    0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
-  --handle-shadow: 0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--figma-elevation-100);
-}
+    0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.08), transparent),
+    0px 10px 24px 0px light-dark(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.45)),
+    0px 2px 5px 0px light-dark(rgba(0, 0, 0, 0.15), transparent),
+    0px 3px 5px 0px light-dark(transparent, rgba(0, 0, 0, 0.35)),
+    inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.1));
 
-/* Dark theme overrides for non-color values (shadows, elevations) */
-/* light-dark() only works for colors, so these use class-based switching */
-/* The @media block is a no-JS fallback — ignored when setTheme() sets classes */
-@media (prefers-color-scheme: dark) {
-  :root:not(.figma-dark):not(.figma-light) {
-    --handle-shadow:
-      0px 0 0 0.75px rgba(0, 0, 0, 0.1),
-      0px 0px 0.5px 0px rgba(255, 255, 255, 0.1);
-    --figma-elevation-100:
-      0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
-      0px 0.75px 0px 0px rgba(255, 255, 255, 0.1) inset,
-      0px 1px 3px 0px rgba(0, 0, 0, 0.4);
-    --figma-elevation-200:
-      0px 3px 8px rgba(0, 0, 0, 0.35), 0px 1px 3px rgba(0, 0, 0, 0.5),
-      inset 0px 0.5px 0px rgba(255, 255, 255, 0.08),
-      inset 0px 0px 0.5px rgba(255, 255, 255, 0.3);
-    --figma-elevation-400-menu-panel:
-      0px 0.5px 0px 0px rgba(255, 255, 255, 0.08) inset,
-      0px 10px 16px 0px rgba(0, 0, 0, 0.35),
-      inset 0px 0.75px 0px rgba(255, 255, 255, 0.075),
-      0px 2px 5px 0px rgba(0, 0, 0, 0.35);
-    --figma-elevation-500-modal-window:
-      0px 10px 24px rgba(0, 0, 0, 0.45), 0px 3px 5px rgba(0, 0, 0, 0.35),
-      inset 0px 0.75px 0px rgba(255, 255, 255, 0.1);
-  }
-}
-
-/* Class-based dark theme override (primary mechanism via setTheme()) */
-:root.figma-dark {
   --handle-shadow:
-    0px 0 0 0.75px rgba(0, 0, 0, 0.1),
-    0px 0px 0.5px 0px rgba(255, 255, 255, 0.1);
-  --figma-elevation-100:
-    0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
-    0px 0.75px 0px 0px rgba(255, 255, 255, 0.1) inset,
-    0px 1px 3px 0px rgba(0, 0, 0, 0.4);
-  --figma-elevation-200:
-    0px 3px 8px rgba(0, 0, 0, 0.35), 0px 1px 3px rgba(0, 0, 0, 0.5),
-    inset 0px 0.5px 0px rgba(255, 255, 255, 0.08),
-    inset 0px 0px 0.5px rgba(255, 255, 255, 0.3);
-  --figma-elevation-400-menu-panel:
-    0px 0.5px 0px 0px rgba(255, 255, 255, 0.08) inset,
-    0px 10px 16px 0px rgba(0, 0, 0, 0.35),
-    inset 0px 0.75px 0px rgba(255, 255, 255, 0.075),
-    0px 2px 5px 0px rgba(0, 0, 0, 0.35);
-  --figma-elevation-500-modal-window:
-    0px 10px 24px rgba(0, 0, 0, 0.45), 0px 3px 5px rgba(0, 0, 0, 0.35),
-    inset 0px 0.75px 0px rgba(255, 255, 255, 0.1);
+    0px 0px 0px 0.5px rgba(0, 0, 0, 0.1),
+    0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.1)),
+    0px 1px 3px 0px light-dark(rgba(0, 0, 0, 0.15), transparent);
 }
 
 button,

package/fig.js

@@ -1240,11 +1240,12 @@ class FigPopup extends HTMLDialogElement {
 
   #handleOutsidePointerDown(event) {
     if (!this.open || !super.open) return;
+    const closedby = this.getAttribute("closedby");
+    if (closedby === "none" || closedby === "closerequest") return;
     const target = event.target;
     if (!(target instanceof Node)) return;
     if (this.contains(target)) return;
 
-    // Fallback for browsers that do not honor dialog closedby consistently.
     this.open = false;
   }
 

package/index.html

@@ -158,6 +158,36 @@
             border-radius: 4px;
             color: var(--figma-color-text);
         }
+
+        .toolbelt {
+            position: fixed;
+            bottom: 0.75rem;
+            left: 0;
+            right: 0;
+            width: fit-content;
+            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            gap: var(--spacer-2);
+            padding: var(--spacer-2);
+            background-color: var(--figma-color-bg);
+            border-radius: var(--radius-large);
+            box-shadow: var(--figma-elevation-200);
+            z-index: 100;
+
+            &>section {
+                display: flex;
+                padding: 0;
+                align-items: center;
+                margin: 0;
+                gap: var(--spacer-2);
+
+                &:not(:first-child):not(:only-child) {
+                    border-left: 1px solid var(--figma-color-border);
+                    padding-left: var(--spacer-2);
+                }
+            }
+        }
     </style>
 </head>
 
@@ -296,7 +326,8 @@
                 <label>Input (with icon)</label>
                 <fig-button variant="input">
                     Options
-                    <span class="fig-mask-icon" style="--icon: var(--icon-chevron); --size: 1rem"></span>
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-chevron); --size: 1rem"></span>
                 </fig-button>
             </fig-field>
 
@@ -392,7 +423,8 @@
                 <label>Icon (input)</label>
                 <fig-button variant="input"
                             icon="true">
-                    <span class="fig-mask-icon" style="--icon: var(--icon-chevron); --size: 1rem"></span>
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-chevron); --size: 1rem"></span>
                 </fig-button>
             </fig-field>
             <fig-field direction="horizontal">
@@ -863,6 +895,115 @@
                     <fig-button close-dialog>Close</fig-button>
                 </footer>
             </dialog>
+
+            <h3>Non-Modal Dialog</h3>
+            <p style="font-size: 12px; color: var(--figma-color-text-secondary); margin-bottom: 12px;">
+                Use <code>.show()</code> instead of <code>.showModal()</code> to open a non-modal dialog.
+                It won't create a backdrop or trap focus, and the rest of the page remains interactive.
+            </p>
+            <pre><code>&lt;dialog id="my-dialog" is="fig-dialog" drag="true"&gt;
+  ...
+&lt;/dialog&gt;
+
+&lt;script&gt;
+  // Non-modal — no backdrop, page stays interactive
+  document.getElementById('my-dialog').show();
+
+  // Modal — backdrop + focus trap
+  document.getElementById('my-dialog').showModal();
+&lt;/script&gt;</code></pre>
+            <fig-button onclick="document.getElementById('non-modal-dialog').show()">Open Non-Modal Dialog</fig-button>
+
+            <dialog id="non-modal-dialog"
+                    is="fig-dialog"
+                    drag="true"
+                    position="center center">
+                <fig-header>
+                    <h3>Non-Modal Dialog</h3>
+                    <fig-tooltip text="Close">
+                        <fig-button variant="ghost"
+                                    icon="true"
+                                    close-dialog>
+                            <span class="fig-mask-icon"
+                                  style="--icon: var(--icon-close)"></span>
+                        </fig-button>
+                    </fig-tooltip>
+                </fig-header>
+                <fig-content>
+                    <p>This dialog is non-modal — you can still interact with the page behind it.</p>
+                    <fig-field direction="horizontal">
+                        <label>Opacity</label>
+                        <fig-slider value="75"
+                                    min="0"
+                                    max="100"></fig-slider>
+                    </fig-field>
+                </fig-content>
+                <footer>
+                    <fig-button close-dialog>Done</fig-button>
+                </footer>
+            </dialog>
+
+            <h3>closedby Attribute</h3>
+            <p style="font-size: 12px; color: var(--figma-color-text-secondary); margin-bottom: 12px;">
+                The <code>closedby</code> attribute controls how the dialog can be dismissed.
+                <code>fig-dialog</code> defaults to <code>closedby="any"</code> (light dismiss).
+            </p>
+            <pre><code>&lt;!-- Click outside, Esc key, or close button all dismiss --&gt;
+&lt;dialog is="fig-dialog" closedby="any"&gt;...&lt;/dialog&gt;
+
+&lt;!-- Only Esc key or close button dismiss (no click-outside) --&gt;
+&lt;dialog is="fig-dialog" closedby="closerequest"&gt;...&lt;/dialog&gt;
+
+&lt;!-- Only explicit close button dismisses --&gt;
+&lt;dialog is="fig-dialog" closedby="none"&gt;...&lt;/dialog&gt;</code></pre>
+            <hstack>
+                <fig-button variant="secondary"
+                            onclick="document.getElementById('closedby-any-dialog').show()">closedby="any"</fig-button>
+                <fig-button variant="secondary"
+                            onclick="document.getElementById('closedby-none-dialog').show()">closedby="none"</fig-button>
+            </hstack>
+
+            <dialog id="closedby-any-dialog"
+                    is="fig-dialog"
+                    drag="true"
+                    closedby="any"
+                    position="center center">
+                <fig-header>
+                    <h3>Light Dismiss</h3>
+                    <fig-tooltip text="Close">
+                        <fig-button variant="ghost"
+                                    icon="true"
+                                    close-dialog>
+                            <span class="fig-mask-icon"
+                                  style="--icon: var(--icon-close)"></span>
+                        </fig-button>
+                    </fig-tooltip>
+                </fig-header>
+                <fig-content>
+                    <p>Click anywhere outside this dialog to close it.</p>
+                </fig-content>
+            </dialog>
+
+            <dialog id="closedby-none-dialog"
+                    is="fig-dialog"
+                    drag="true"
+                    closedby="none"
+                    position="center center">
+                <fig-header>
+                    <h3>No Light Dismiss</h3>
+                    <fig-tooltip text="Close">
+                        <fig-button variant="ghost"
+                                    icon="true"
+                                    close-dialog>
+                            <span class="fig-mask-icon"
+                                  style="--icon: var(--icon-close)"></span>
+                        </fig-button>
+                    </fig-tooltip>
+                </fig-header>
+                <fig-content>
+                    <p>This dialog can only be closed with the close button.</p>
+                </fig-content>
+            </dialog>
         </section>
         <hr>
 
@@ -4113,6 +4254,50 @@ button.addEventListener('click', () => {
         </fig-footer>
     </main>
 
+    <div class="toolbelt">
+        <section>
+            <fig-button variant="ghost"
+                        icon="true">
+                <span class="fig-mask-icon"
+                      style="--icon: var(--icon-back)"></span>
+            </fig-button>
+            <fig-button variant="ghost"
+                        icon="true">
+                <span class="fig-mask-icon"
+                      style="--icon: var(--icon-forward)"></span>
+            </fig-button>
+        </section>
+        <section>
+            <fig-button variant="ghost"
+                        icon="true">
+                <span class="fig-mask-icon"
+                      style="--icon: var(--icon-add)"></span>
+            </fig-button>
+            <fig-button variant="ghost"
+                        icon="true">
+                <span class="fig-mask-icon"
+                      style="--icon: var(--icon-minus)"></span>
+            </fig-button>
+        </section>
+        <section>
+            <fig-button variant="ghost"
+                        icon="true">
+                <span class="fig-mask-icon"
+                      style="--icon: var(--icon-swap)"></span>
+            </fig-button>
+            <fig-button variant="ghost"
+                        icon="true">
+                <span class="fig-mask-icon"
+                      style="--icon: var(--icon-rotate)"></span>
+            </fig-button>
+            <fig-button variant="ghost"
+                        icon="true">
+                <span class="fig-mask-icon"
+                      style="--icon: var(--icon-eyedropper)"></span>
+            </fig-button>
+        </section>
+    </div>
+
     <script>
         // Highlight nav item based on hash
         function updateActiveNav() {
@@ -4180,8 +4365,7 @@ button.addEventListener('click', () => {
 
         function setTheme(isDark) {
             document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
-            document.documentElement.classList.toggle('figma-dark', isDark);
-            document.documentElement.classList.toggle('figma-light', !isDark);
+
             localStorage.setItem('theme', isDark ? 'dark' : 'light');
             // Sync switch state
             if (isDark) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "2.19.1",
+  "version": "2.20.0",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",