@perspective-dev/viewer 5.3.1 → 5.5.0

package/src/css/column-style.css

@@ -12,6 +12,11 @@
  */
 
 :host {
+    label.intl-label:before,
+    div.tab-title:before {
+        content: var(--psp-label--content);
+    }
+
     #column-style-container,
     #plugin-config-container,
     #window-editor-container {
@@ -28,6 +33,14 @@
             align-items: center;
             padding-left: 4px;
             margin: 0px;
+
+            &.enabled:before {
+                content: var(--psp-label--enabled--content, "Enabled");
+            }
+
+            &.disabled:before {
+                content: var(--psp-label--disabled--content, "Disabled");
+            }
         }
 
         .is-default-value .bool-field-container {
@@ -48,6 +61,68 @@
             }
         }
 
+        .alignment-grid {
+            display: grid;
+            flex: 0 1 100%;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 0px;
+            padding: 1px;
+            border: 1px solid var(--psp-inactive--color);
+            border-radius: 5px;
+        }
+
+        .alignment-cell {
+            display: grid;
+            place-items: center;
+            width: 100%;
+            height: 16px;
+            padding: 0;
+            border: 1px solid transparent;
+            border-radius: 4px;
+            background: none;
+            cursor: pointer;
+
+            &::before {
+                content: "";
+                width: 100%;
+                height: 100%;
+                border-radius: 3px;
+                background: #00000020;
+            }
+
+            &[aria-checked="true"]::before {
+                background: var(--psp-inactive--color);
+            }
+
+            &:hover:not(:disabled) {
+                border-color: var(--psp--color);
+            }
+
+            &:disabled {
+                cursor: default;
+
+                &::before {
+                    opacity: 0.25;
+                }
+            }
+
+            &[data-align^="top"] {
+                align-items: start;
+            }
+
+            &[data-align^="bottom"] {
+                align-items: end;
+            }
+
+            &[data-align$="left"] {
+                justify-items: start;
+            }
+
+            &[data-align$="right"] {
+                justify-items: end;
+            }
+        }
+
         &.no-style {
             font-style: italic;
             background-color: var(--psp-placeholder--background);
@@ -198,6 +273,7 @@
 
         div.section {
             display: flex;
+            justify-content: space-between;
             align-items: center;
             flex: 1 1 100%;
         }
@@ -524,6 +600,105 @@
             }
         }
 
+        .font-style-toggle {
+            flex: 0 0 24px;
+            height: 24px;
+            margin-left: 4px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid var(--psp-inactive--color, #666);
+            border-radius: 2px;
+            cursor: pointer;
+            user-select: none;
+            font-size: 12px;
+            color: var(--psp-inactive--color, #666);
+
+            &.bold:before {
+                content: "B";
+                font-weight: bold;
+            }
+
+            &.italic:before {
+                content: "I";
+                font-style: italic;
+                font-family: serif;
+            }
+
+            &:hover {
+                color: var(--psp--color, inherit);
+                border-color: var(--psp--color, inherit);
+            }
+
+            &[aria-pressed="true"] {
+                color: var(--psp--background-color);
+                background-color: var(--psp--color);
+                border-color: var(--psp--color);
+            }
+        }
+
+        .font-group {
+            display: flex;
+            flex: 1 1 100%;
+            flex-wrap: wrap;
+            contain: inline-size;
+            & > input {
+                flex: 1 1 auto;
+            }
+
+            .font-group-family {
+                flex: 1 1 100%;
+                margin-bottom: 3px;
+            }
+        }
+
+        .local-fonts-controls {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            flex: 1 1 100%;
+            height: 0;
+            margin-top: 10px;
+            margin-bottom: -10px;
+            margin-right: 24px;
+            position: relative;
+            z-index: 1;
+            font-size: var(--label--font-size, 0.75em);
+            color: var(--psp-inactive--color);
+
+            .local-fonts-request {
+                cursor: pointer;
+                user-select: none;
+                line-height: 15px;
+
+                &:before {
+                    font-family: var(--psp-button--font-family, inherit);
+                    color: var(--psp-inactive--color, #666);
+                    content: var(
+                        --psp-label--request-local-fonts--content,
+                        "Local Fonts"
+                    );
+                }
+
+                &:hover:before {
+                    color: var(--psp--color, inherit);
+                }
+
+                &.blocked {
+                    cursor: help;
+
+                    &:before,
+                    &:hover:before {
+                        color: var(--psp-inactive--color, #666);
+                        content: var(
+                            --psp-label--local-fonts-blocked--content,
+                            "No Access"
+                        );
+                    }
+                }
+            }
+        }
+
         input[type="color"] {
             width: 100%;
             height: 24px;

package/src/css/config-selector.css

@@ -108,7 +108,7 @@
                 display: flex;
                 align-items: center;
                 position: relative;
-                padding-right: 8px;
+                padding-right: 3px;
 
                 .column_name {
                     display: block;
@@ -216,23 +216,25 @@
         #group_by label.pivot-selector-label:before {
             content: var(
                 --psp-label--pivot--content,
-                var(--psp-label--group-by--content, "Group By")
+                var(--psp-label--group-by--content, var(--psp-missing))
             );
         }
 
         #group_by label.pivot-selector-label:after {
-            content: "(" var(--psp-label--group-by--content, "Group By") ")";
+            content: "(" var(--psp-label--group-by--content, var(--psp-missing))
+                ")";
         }
 
         #split_by label.pivot-selector-label:before {
             content: var(
                 --psp-label--pivot--content,
-                var(--psp-label--split-by--content, "Split By")
+                var(--psp-label--split-by--content, var(--psp-missing))
             );
         }
 
         #split_by label.pivot-selector-label:after {
-            content: "(" var(--psp-label--split-by--content, "Split By") ")";
+            content: "(" var(--psp-label--split-by--content, var(--psp-missing))
+                ")";
         }
 
         #group_by label.pivot-selector-label:after,
@@ -244,25 +246,31 @@
         }
 
         #sort label.pivot-selector-label:before {
-            content: var(--psp-label--sort--content, "Order By");
+            content: var(--psp-label--sort--content, var(--psp-missing));
         }
 
         #filter label.pivot-selector-label:before {
-            content: var(--psp-label--filter--content, "Where");
+            content: var(--psp-label--filter--content, var(--psp-missing));
         }
 
         #window-source label.pivot-selector-label:before {
-            content: var(--psp-label--window-source--content, "Column");
+            content: var(
+                --psp-label--window-source--content,
+                var(--psp-missing)
+            );
         }
 
         #window-order-by label.pivot-selector-label:before {
-            content: var(--psp-label--window-order-by--content, "Order By");
+            content: var(
+                --psp-label--window-order-by--content,
+                var(--psp-missing)
+            );
         }
 
         #window-partition-by label.pivot-selector-label:before {
             content: var(
                 --psp-label--window-partition-by--content,
-                "Partition By"
+                var(--psp-missing)
             );
         }
 
@@ -400,7 +408,7 @@
     .sort-icon {
         display: inline-flex;
         margin-left: auto;
-        /* margin-right: 8px; */
+        margin-right: 3px;
         cursor: pointer;
         font-family: var(--psp-button--font-family, inherit);
         background-repeat: no-repeat;

package/src/css/filter-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;
     max-width: 300px;
     overflow: hidden;

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;
@@ -69,6 +93,15 @@
             flex: 0 1 auto;
             overflow: hidden;
             padding: 8px 8px 8px 0;
+
+            #debug-panel-error {
+                flex: 0 0 auto;
+                padding-top: 6px;
+                font-size: 10px;
+                color: var(--psp-error--color);
+                white-space: pre-wrap;
+                overflow-wrap: anywhere;
+            }
         }
 
         #editor {

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,11 +34,12 @@
             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 {
@@ -85,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)
+                );
             }
         }
 
@@ -204,6 +210,17 @@
             background-color: transparent;
         }
 
+        span#status.pending {
+            background-color: var(--psp-inactive--color);
+            mask-image: var(--psp-icon--status-pending--mask-image);
+            -webkit-mask-image: var(--psp-icon--status-pending--mask-image);
+            &:before {
+                visibility: hidden;
+                content: var(--psp-icon--status-pending--mask-image);
+                line-height: 0;
+            }
+        }
+
         span#status.connected,
         span#status.updating {
             mask-image: var(--psp-icon--status-ok--mask-image);
@@ -371,7 +388,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 +420,10 @@
                 }
             }
             span:not(.icon):before {
-                content: var(--psp-label--reset-button--content);
+                content: var(
+                    --psp-label--reset-button--content,
+                    var(--psp-missing)
+                );
             }
         }
 
@@ -418,7 +441,10 @@
             }
 
             span:not(.icon):before {
-                content: var(--psp-label--copy-button--content);
+                content: var(
+                    --psp-label--copy-button--content,
+                    var(--psp-missing)
+                );
             }
         }
 
@@ -440,8 +466,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 +482,10 @@
                     visibility: hidden;
                 }
             }
+
+            & > .dropdown-width-container {
+                padding-left: 5px;
+            }
         }
 
         #theme_icon.modified:hover + #theme > .icon {
@@ -488,6 +522,10 @@
             }
         }
 
+        .modal-target .button > span.icon-label {
+            display: none !important;
+        }
+
         .hover-target {
             margin: 0;
             display: inline-flex;
@@ -495,11 +533,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 {