@perspective-dev/viewer 5.3.0 → 5.4.0

package/src/css/form/debug.css

@@ -12,10 +12,6 @@
  */
 
 :host {
-    div.tab-title#Debug:before {
-        content: var(--psp-label--debug-tab--content, "Debug JSON");
-    }
-
     #debug-panel-overflow {
         overflow: hidden;
         display: flex;
@@ -56,6 +52,34 @@
                     color: var(--psp--background-color);
                 }
 
+                &#debug-panel-apply:before {
+                    content: var(
+                        --psp-label--apply-button--content,
+                        var(--psp-missing)
+                    );
+                }
+
+                &#debug-panel-reset:before {
+                    content: var(
+                        --psp-label--reset-button--content,
+                        var(--psp-missing)
+                    );
+                }
+
+                &#debug-panel-copy:before {
+                    content: var(
+                        --psp-label--copy-button--content,
+                        var(--psp-missing)
+                    );
+                }
+
+                &#debug-panel-paste:before {
+                    content: var(
+                        --psp-label--paste-button--content,
+                        var(--psp-missing)
+                    );
+                }
+
                 &[disabled] {
                     cursor: not-allowed;
                     opacity: 0.2;

package/src/css/function-dropdown.css

@@ -12,14 +12,14 @@
  */
 
 :host {
-    position: fixed;
-    z-index: 10000;
+    background-color: var(--psp--background-color, #ffffff);
+    color: var(--psp--color, #161616);
+    border: 1px solid var(--psp-inactive--color, #ababab);
+    border-radius: 0 0 2px 2px;
     outline: none;
     font-size: 0.75em;
-    border: inherit;
-    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+    box-shadow: var(--psp-dropdown--box-shadow);
     user-select: none;
-    background-color: white;
     padding: 6px;
     display: flex;
     flex-direction: column;

package/src/css/panel-tab.css

@@ -90,6 +90,10 @@
     mask-image: var(--psp-icon--active-indicator--mask-image);
 }
 
+:host([part~="tab"].closing) {
+    pointer-events: none;
+}
+
 /* A lone tab (its viewer has a single plugin child) has no stack to open —
  * no caret. Must follow the `.active` rule (equal specificity) to win when
  * the lone tab is also active. */
@@ -139,6 +143,25 @@
     outline: none;
 }
 
+span#rows {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    margin-left: 12px;
+    margin-right: 6px;
+    pointer-events: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 0 100000000 auto;
+}
+
+span#rows span.x,
+span#rows span.total {
+    text-overflow: ellipsis;
+    color: var(--psp-inactive--color);
+}
+
 .psp-tab-master {
     margin-right: 6px;
 }

package/src/css/plugin-selector.css

@@ -34,15 +34,17 @@
             margin: 0 0px 0 -9px;
 
             #plugin_selector_border {
-                height: 2px;
-                min-height: 2px;
+                height: 3px;
+                min-height: 3px;
                 width: 100%;
-                background-color: var(--psp-inactive--color, #6e6e6e);
-                margin-top: 2px;
+                margin-top: 1px;
+                background-color: #00000020;
+                border-bottom: 1px solid var(--psp-inactive--color, #6e6e6e);
             }
 
             .plugin-selector-options {
                 overflow-y: auto;
+                height: 100%;
             }
 
             &.open {
@@ -84,7 +86,6 @@
                 );
                 display: flex;
                 align-items: center;
-                border-bottom: 1px solid transparent;
                 box-shadow: 0px 1px var(--psp-inactive--color, #6e6e6e);
                 cursor: pointer;
             }

package/src/css/render-warning.css

@@ -46,7 +46,7 @@
         }
 
         .plugin_information__icon:before {
-            content: var(--psp-icon-overflow-hint--content);
+            content: var(--psp-icon-overflow-hint--content, var(--psp-missing));
             height: 20px;
             font-family: var(
                 --overflow_hint--font-family,

package/src/css/status-bar.css

@@ -46,10 +46,9 @@
         box-shadow: 0 1px 0 0px var(--psp-inactive--color);
         z-index: 6;
         display: var(--psp-status-bar--display, flex);
-        gap: 4px;
         align-items: center;
         background: var(--psp--background-color);
-        padding: var(--psp-status-bar--padding, 0 31px 0 4px);
+        padding: var(--psp-status-bar--padding, 0 26px 0 4px);
         position: relative;
         height: var(--psp-status-bar--height, 38px);
         min-height: var(--psp-status-bar--height, 38px);
@@ -69,21 +68,28 @@
             flex: 1 1000 auto;
         }
 
-        span#rows {
-            display: flex;
-            align-items: flex-end;
-            gap: 6px;
-            flex: 0 1000 auto;
-            overflow: hidden;
-            margin: 0px 0px;
-            pointer-events: none;
-            span {
-                margin: 0 !important;
+        #panel-bar {
+            flex: 0 0 auto;
+            height: 100%;
+        }
+
+        span#new_panel {
+            & > .icon {
+                -webkit-mask-image: var(--psp-icon--new-panel--mask-image);
+                mask-image: var(--psp-icon--new-panel--mask-image);
+                display: inline-flex;
+                &:before {
+                    line-height: 0;
+                    content: var(--psp-icon--new-panel--mask-image);
+                    visibility: hidden;
+                }
             }
 
-            span.x,
-            span.total {
-                color: var(--psp-inactive--color);
+            span:not(.icon):before {
+                content: var(
+                    --psp-label--new-panel-button--content,
+                    var(--psp-missing)
+                );
             }
         }
 
@@ -371,7 +377,10 @@
             }
 
             span:not(.icon):before {
-                content: var(--psp-label--export-button--content, "Export");
+                content: var(
+                    --psp-label--export-button--content,
+                    var(--psp-missing)
+                );
             }
         }
 
@@ -400,7 +409,10 @@
                 }
             }
             span:not(.icon):before {
-                content: var(--psp-label--reset-button--content);
+                content: var(
+                    --psp-label--reset-button--content,
+                    var(--psp-missing)
+                );
             }
         }
 
@@ -418,7 +430,10 @@
             }
 
             span:not(.icon):before {
-                content: var(--psp-label--copy-button--content);
+                content: var(
+                    --psp-label--copy-button--content,
+                    var(--psp-missing)
+                );
             }
         }
 
@@ -440,8 +455,12 @@
                 height: 100%;
             }
 
+            .select-arrow {
+                margin: 0;
+            }
+
             & > .icon {
-                margin: 0 6px 0 4px;
+                margin: 0 2px 0 2px;
                 height: auto;
                 -webkit-mask-image: var(--psp-icon--theme--mask-image);
                 mask-image: var(--psp-icon--theme--mask-image);
@@ -452,6 +471,10 @@
                     visibility: hidden;
                 }
             }
+
+            & > .dropdown-width-container {
+                padding-left: 5px;
+            }
         }
 
         #theme_icon.modified:hover + #theme > .icon {
@@ -488,6 +511,10 @@
             }
         }
 
+        .modal-target .button > span.icon-label {
+            display: none !important;
+        }
+
         .hover-target {
             margin: 0;
             display: inline-flex;
@@ -495,11 +522,15 @@
             align-items: center;
 
             &:focus-within,
-            &:hover,
-            &.modal-target {
+            &:hover:not(.modal-target) {
                 box-shadow:
                     -4px 0 0 var(--psp--color),
                     4px 0 0 var(--psp--color);
+            }
+
+            &:focus-within,
+            &:hover,
+            &.modal-target {
                 background-color: var(--psp--color);
             }
 

package/src/css/type-icon.css

@@ -13,9 +13,7 @@
 
 :host #selected-columns .type-icon,
 :host #sub-columns .type-icon {
-    /* position: absolute; */
-    /* left: 15px; */
-    margin-left: 4px;
+    margin-left: 1px;
 }
 
 :host .icon {

package/src/css/{containers → ui/containers}/context-menu.css

@@ -12,24 +12,30 @@
  */
 
 /* Panel context menu (right-click a panel). The `<perspective-context-menu>`
- * host is body-mounted by `PortalModal` (which owns position/z-index inline)
- * and themed by the document theme rules' modal selector groups — chrome like
- * `background-color`/`color`/`border` lands on the HOST from `defaults.css` /
- * each theme's `perspective-context-menu[theme="X"]` group, exactly like the
- * Copy/Export menus. Only the interior layout + item states live here. */
+ * host is a viewer light-DOM child in the top layer (see `PortalModal`),
+ * themed by the `--psp-*` vars it inherits; its chrome lives here, exactly
+ * like the Copy/Export menus' surface. */
+
+@import "./dropdown-menu-items.css";
 
 :host {
+    overflow: visible;
+    padding: 0;
+    background-color: var(--psp--background-color, #ffffff);
+    color: var(--psp--color, #161616);
+    border: 1px solid var(--psp-inactive--color, #ababab);
+    border-radius: 0 0 2px 2px;
     outline: none;
     user-select: none;
     font-size: 12px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--psp-dropdown--box-shadow);
 }
 
 .context-menu {
     display: flex;
     flex-direction: column;
     min-width: 120px;
-    padding: 4px 0;
+    padding: 0px 0;
 }
 
 .context-menu-item {
@@ -73,17 +79,11 @@
     }
 }
 
-/* Hover flyout. Positioned OUTSIDE the host's box, so the host-level theme
- * chrome (see the :host comment above) doesn't paint it — rebuild the same
- * chrome from the modal selector groups' vars. Edge-adjacent (`left: 100%`,
- * no gap) so the pointer never leaves the hover chain crossing into it;
- * `top: -5px` aligns its first row with the parent row (4px menu padding +
- * 1px border). */
 .context-menu-submenu {
     display: none;
     position: absolute;
     left: 100%;
-    top: -5px;
+    top: -1px;
     max-height: 50vh;
     overflow-y: auto;
     background-color: var(--psp--background-color, white);
@@ -93,10 +93,16 @@
      * foreground. */
     color: var(--psp--color);
     border: 1px solid var(--psp-inactive--color);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--psp-dropdown--box-shadow);
+}
+
+.context-menu-submenu > .new-panel-menu {
+    display: flex;
+    flex-direction: column;
+    padding: 8px;
+    min-width: 120px;
 }
 
-/* Non-interactive group label (e.g. client names in the "New" sub-menu). */
 .context-menu-header {
     padding: 4px 12px 2px;
     cursor: default;

package/src/css/ui/containers/dropdown-menu-items.css

@@ -0,0 +1,66 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+ * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+ * ┃ This file is part of the Perspective library, distributed under the terms ┃
+ * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+
+.dropdown-group-label {
+    font-size: 0.75em;
+    color: var(--psp-inactive--color);
+    &:not(:first-of-type) {
+        margin-top: 16px;
+    }
+}
+
+.dropdown-group-label[data-label="new-from-table"]::before {
+    content: var(--psp-label--new-from-table--content, var(--psp-missing));
+}
+
+.dropdown-group-label[data-label="new-from-panel"]::before {
+    content: var(--psp-label--new-from-panel--content, var(--psp-missing));
+}
+
+.dropdown-group-sublabel {
+    font-size: 0.75em;
+    text-transform: uppercase;
+    color: var(--psp-inactive--color);
+    margin-top: 6px;
+}
+
+.dropdown-group-container {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+}
+
+.dropdown-group-label,
+.dropdown-group-sublabel,
+.dropdown-group-container > span,
+.no-results {
+    display: inline-flex;
+    align-items: center;
+    margin: 0 -8px;
+    padding: 0 8px;
+}
+
+.dropdown-menu-item {
+    cursor: pointer;
+    min-height: 22px;
+    &:hover {
+        background-color: var(--psp--color);
+        color: var(--psp--background-color);
+    }
+}
+
+.no-results {
+    font-style: italic;
+    padding: 6px 24px;
+    color: #ccc;
+}

package/src/css/{containers → ui/containers}/dropdown-menu.css

@@ -11,15 +11,17 @@
  * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
  */
 
+@import "./dropdown-menu-items.css";
+
 :host {
-    position: fixed;
-    z-index: 10000;
+    overflow: visible;
+    background-color: var(--psp--background-color, #ffffff);
+    color: var(--psp--color, #161616);
+    border: 1px solid var(--psp-inactive--color, #ababab);
+    border-radius: 0 0 2px 2px;
     outline: none;
-    font-size: 0.75em;
-    border: inherit;
-    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+    box-shadow: var(--psp-dropdown--box-shadow);
     user-select: none;
-    background-color: white;
     padding: 8px;
 
     display: flex;
@@ -45,51 +47,4 @@
         color: var(--psp-error--color, #ff0000);
         border-color: var(--psp-error--color, #ff0000);
     }
-
-    .selected {
-        background-color: rgba(0, 0, 0, 0.05);
-    }
-
-    .dropdown-group-label {
-        color: var(--psp-inactive--color);
-
-        &:not(:first-of-type) {
-            margin-top: 16px;
-        }
-    }
-
-    .dropdown-group-container {
-        display: flex;
-        flex-direction: column;
-        margin: 0;
-    }
-
-    span {
-        min-height: 22px;
-        display: inline-flex;
-        align-items: center;
-        margin: 0 -8px;
-        padding: 0 8px;
-    }
-
-    .dropdown-group-container span {
-        cursor: pointer;
-    }
-
-    .no-results {
-        font-style: italics;
-        padding: 6px 24px;
-        color: #ccc;
-    }
-}
-
-:host(:hover) {
-    .selected {
-        background-color: transparent;
-    }
-
-    .dropdown-group-container span:hover {
-        background-color: var(--psp--color);
-        color: var(--psp--background-color);
-    }
 }

package/src/css/{containers → ui/containers}/tabs.css

@@ -13,13 +13,23 @@
 
 :host {
     #format-tab {
-        overflow: scroll;
+        overflow: auto;
+        scrollbar-gutter: stable;
+    }
+
+    #style-tab {
+        margin-right: -6px;
+        #column-style-container {
+            margin-right: 6px;
+        }
     }
 
     #plugin-tab {
         overflow-x: hidden;
-        overflow-y: scroll;
-        padding: 12px 0 0 0;
+        overflow-y: auto;
+        scrollbar-gutter: stable;
+        padding: 12px 0 0 8px;
+        margin-left: -8px;
     }
 
     .tab-content {

package/src/css/{dom → ui/dom}/select.css

@@ -33,6 +33,25 @@
             bottom: 0px;
             cursor: pointer;
         }
+
+        .select-arrow {
+            position: absolute;
+            pointer-events: none;
+            top: 50%;
+            right: 6px;
+            width: 6px;
+            height: 4px;
+            transform: translateY(-50%);
+            background-color: currentColor;
+            -webkit-mask-image: var(--psp-icon--select-arrow--mask-image);
+            mask-image: var(--psp-icon--select-arrow--mask-image);
+            -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+            -webkit-mask-position: center;
+            mask-position: center;
+            -webkit-mask-size: contain;
+            mask-size: contain;
+        }
     }
 
     select {
@@ -46,14 +65,6 @@
         /* font-size: 10px; */
         font-family: inherit;
         background-color: transparent;
-        background-image: var(--psp-icon--select-arrow--mask-image);
-        background-position: right 2px center;
-        background-repeat: no-repeat;
-
-        &.invert:focus-within,
-        &.invert:hover {
-            background-image: var(--psp-icon--select-arrow-hover--mask-image);
-        }
 
         option {
             color: var(--psp--color, inherit);