@perspective-dev/viewer 4.0.0

package/src/less/containers/tabs.less

@@ -0,0 +1,90 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+@import "dom/scrollbar.less";
+
+:host {
+    .tab-gutter {
+        border-color: var(--inactive--color, #6e6e6e);
+        display: flex;
+
+        .tab.tab-padding {
+            flex: 1;
+            cursor: unset;
+            .tab-title {
+                border-right: none;
+            }
+            .tab-border {
+                border-right: none;
+            }
+        }
+
+        .tab {
+            //TODO: This needs to be a variable color. Which one?
+            background: rgba(0, 0, 0, 0.125);
+            border-right: 1px solid var(--inactive--color, #6e6e6e);
+            user-select: none;
+            cursor: pointer;
+
+            .tab-title {
+                font-size: 10px;
+                padding: 10px;
+                border-bottom: 1px solid var(--inactive--color, #6e6e6e);
+            }
+            .tab-border {
+                height: 2px;
+                width: 100%;
+                background-color: var(--inactive--color, #6e6e6e);
+                margin-top: 1px;
+            }
+
+            &.selected {
+                background: unset;
+                border-bottom: 1px transparent;
+
+                .tab-title {
+                    border-bottom: 1px transparent;
+                    border-right: none;
+                }
+                .tab-border {
+                    background-color: transparent;
+                    border-right: none;
+                }
+            }
+        }
+    }
+
+    #format-tab {
+        overflow: scroll;
+    }
+
+    .tab-content {
+        @include scrollbar;
+        flex: 1 1 auto;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        .tab-section:last-child {
+            padding: 12px 8px 12px 8px;
+        }
+
+        .tab-section {
+            padding: 12px 8px 0px 8px;
+            flex: 0 0 auto;
+            overflow: hidden;
+        }
+
+        .text {
+            margin-left: 1em;
+        }
+    }
+}

package/src/less/dom/checkbox.less

@@ -0,0 +1,100 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+@mixin icon {
+    background-repeat: no-repeat;
+    background-color: var(--icon--color);
+    content: "";
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+}
+
+:host {
+    input[type="checkbox"].alternate {
+        appearance: none;
+        height: 14px;
+        width: 14px;
+        padding: 0px;
+        cursor: pointer;
+        outline: none;
+        margin: 0 5px;
+
+        &:before {
+            @include icon;
+            width: 14px;
+            height: 14px;
+            font-family: var(--button--font-family, inherit);
+            background-color: var(--icon--color, #ccc);
+            -webkit-mask-image: var(--inactive-column-selector--content, none);
+            mask-image: var(--inactive-column-selector--content, none);
+        }
+
+        &:hover {
+            border-radius: 2px;
+            outline: 1px solid var(--icon--color);
+        }
+
+        &:checked:hover {
+            background-color: var(--icon--color, #ccc);
+            &:before {
+                background-color: var(--plugin--background, #ccc);
+            }
+        }
+
+        &:checked:before {
+            -webkit-mask-image: var(--active-column-selector--content, none);
+            mask-image: var(--active-column-selector--content, none);
+        }
+    }
+
+    input[type="checkbox"] {
+        float: left;
+        appearance: none;
+        height: 14px;
+        width: 14px;
+        padding: 0px;
+        cursor: pointer;
+        outline: none;
+        margin: 0 5px 0 0;
+
+        &:checked:before {
+            -webkit-mask-image: var(--column-checkbox-on--mask-image);
+            mask-image: var(--column-checkbox-on--mask-image);
+        }
+
+        &[disabled]:before {
+            opacity: 0.2s;
+        }
+
+        &:before {
+            @include icon;
+            height: 13px;
+            width: 13px;
+            -webkit-mask-image: var(--column-checkbox-off--mask-image);
+            mask-image: var(--column-checkbox-off--mask-image);
+        }
+
+        &:hover {
+            background-color: transparent;
+        }
+
+        &:hover:before {
+            -webkit-mask-image: var(--column-checkbox-hover--mask-image);
+            mask-image: var(--column-checkbox-hover--mask-image);
+        }
+    }
+
+    input[type="checkbox"]:not(:disabled) {
+        cursor: pointer;
+    }
+}

package/src/less/dom/scrollbar.less

@@ -0,0 +1,35 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+@mixin scrollbar {
+    &:hover {
+        --fix: ;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border-radius: 2px;
+        border: 2px solid transparent;
+        box-shadow: inset 0px 0px 0 4px var(--inactive--color);
+    }
+
+    &:hover::-webkit-scrollbar-thumb {
+        border: 1px solid transparent;
+        box-shadow: inset 0px 0px 0 4px var(--inactive--color);
+    }
+
+    &::-webkit-scrollbar,
+    &::-webkit-scrollbar-corner {
+        background-color: transparent;
+        width: 6px;
+        height: 6px;
+    }
+}

package/src/less/dom/select.less

@@ -0,0 +1,63 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+:host {
+    .dropdown-width-container {
+        position: relative;
+        flex: 1 1 auto;
+        height: 100%;
+
+        &:after {
+            content: attr(data-value) " ";
+            visibility: hidden;
+            white-space: nowrap;
+            padding-right: 17px;
+        }
+
+        select {
+            position: absolute;
+            left: 0px;
+            right: 4px;
+            top: 0px;
+            bottom: 0px;
+            cursor: pointer;
+        }
+    }
+
+    select {
+        border-radius: 0;
+        border-width: 0px;
+        outline: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        -ms-appearance: none;
+        appearance: none;
+        color: inherit;
+        padding: 0px 12px 0px 0px;
+        font-size: 10px;
+        font-family: inherit;
+        background-color: transparent;
+        background-image: var(--select-arrow--background-image);
+        background-position: right 2px center;
+        background-repeat: no-repeat;
+
+        &.invert:focus-within,
+        &.invert:hover {
+            background-image: var(--select-arrow--hover--background-image);
+        }
+
+        option {
+            color: var(--icon--color, inherit);
+            background: var(--plugin--background, transparent);
+        }
+    }
+}

package/src/less/empty-column.less

@@ -0,0 +1,72 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+:host {
+    --invalid-column-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 24'><path d='M100 0 L0 24 ' stroke='black' stroke-width='1'/><path d='M0 0 L100 24 ' stroke='black' stroke-width='1'/></svg>");
+    .column-empty {
+        width: 100%;
+    }
+
+    #top_panel .column-invalid.pivot-column,
+    .column-invalid.pivot-column {
+        .column-invalid-input {
+            mask-image: var(--invalid-column-pattern);
+            -webkit-mask-image: var(--invalid-column-pattern);
+            background-color: var(--icon--color);
+            mask-size: cover;
+            -webkit-mask-size: cover;
+            width: 100%;
+            height: 22px;
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size:
+                100% 100%,
+                auto;
+        }
+
+        position: relative;
+        box-sizing: border-box;
+        width: calc(100% - 7px);
+        background-color: #8b868045;
+        border: 1px solid var(--icon--color);
+        border-radius: 2px;
+        margin-right: 6px;
+        margin-bottom: 4px;
+        min-height: 22px;
+        width: calc(100% - 7px);
+        outline: none;
+    }
+
+    .column-empty-input {
+        position: relative;
+        display: flex;
+        align-items: stretch;
+        cursor: auto;
+
+        background-color: #8b868045;
+        border: 1px solid transparent;
+        border-radius: 2px;
+        padding-bottom: 0px;
+        margin-bottom: 4px;
+        min-height: 24px;
+        width: calc(100% - 7px);
+        outline: none;
+        padding-left: 10px;
+        font-family: inherit;
+    }
+
+    .column-empty-input:focus {
+        color: var(--plugin--background);
+        background-color: var(--icon--color);
+        border: 1px solid var(--icon--color);
+    }
+}

package/src/less/expression-editor.less

@@ -0,0 +1,152 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+:host {
+    #editor-container {
+        display: flex;
+        flex-direction: column;
+        min-width: 0px;
+        border: 1px solid var(--inactive--color);
+        background-color: var(--plugin--background);
+        border-radius: 3px;
+        overflow: hidden;
+
+        .error {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            min-height: 1.5em;
+            color: var(--error--color);
+            top: 0.5em;
+            left: 0.5em;
+            position: absolute;
+            font-size: 10px;
+            width: calc(100% - 24px);
+        }
+
+        &.disabled {
+            #textarea_editable,
+            #line_numbers,
+            #editor {
+                background-color: var(--inactive--border-color);
+            }
+        }
+    }
+
+    #attributes-expr {
+        flex: 1 1 auto;
+        margin-top: 1px;
+        display: flex;
+        flex-direction: column;
+    }
+
+    #attribtues-tab .split-panel-child {
+        max-height: 400px;
+        flex-direction: column;
+    }
+
+    #expression-editor {
+        display: flex;
+        flex-direction: column;
+    }
+
+    #editor-alias-container {
+        flex: 0 0 auto;
+        margin-bottom: 2px;
+    }
+
+    .item_title {
+        margin-bottom: 3px;
+        margin-top: 4px;
+    }
+
+    input#expression-name {
+        padding-left: 8px;
+        color: inherit;
+
+        &:placeholder-shown {
+            background-color: transparent;
+        }
+    }
+
+    .split-panel.orient-vertical > .split-panel-child #editor-container {
+        height: calc(100% - 15px);
+    }
+
+    #horizontal-resize {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        width: 8px;
+
+        &:hover {
+            cursor: ew-resize;
+            background: rgba(0, 0, 0, 0.05);
+        }
+    }
+
+    #psp-expression-editor-actions {
+        display: flex;
+        gap: 0.333333em;
+        justify-content: flex-end;
+        align-items: center;
+    }
+
+    #psp-expression-editor-meta {
+        display: flex;
+        flex: 0 0 24px;
+        flex-direction: column;
+        padding: 0.5em;
+        gap: 0.25em;
+        height: 24px;
+        position: relative;
+    }
+
+    #save-settings,
+    #danger-zone {
+        display: flex;
+        gap: 0.333333em;
+    }
+    #save-settings-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 0.333333em;
+    }
+
+    .psp-expression-editor__button {
+        flex: 1;
+        justify-content: center;
+        font-family: inherit;
+        font-size: 0.8333em;
+        text-transform: uppercase;
+        border: 1px solid var(--icon--color);
+        border-radius: 2px;
+        height: 24px;
+        padding: 2px 12px;
+        display: flex;
+        align-items: center;
+        background: none;
+        color: inherit;
+
+        &:not([disabled]):hover {
+            cursor: pointer;
+            background-color: var(--icon--color);
+            color: var(--plugin--background);
+        }
+
+        &[disabled] {
+            cursor: not-allowed;
+            opacity: 0.2;
+        }
+    }
+}

package/src/less/filter-dropdown.less

@@ -0,0 +1,53 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+:host {
+    position: fixed;
+    z-index: 10000;
+    outline: none;
+    font-size: 0.75em;
+    border: inherit;
+    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+    user-select: none;
+    background-color: white;
+    padding: 6px;
+    max-width: 300px;
+    overflow: hidden;
+
+    display: flex;
+    flex-direction: column;
+
+    .selected {
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    span {
+        cursor: pointer;
+    }
+
+    .no-results {
+        font-style: italics;
+        padding: 6px 24px;
+        color: #ccc;
+    }
+}
+
+:host(:hover) {
+    .selected {
+        background-color: transparent;
+    }
+
+    span:hover,
+    span.selected:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+}