@spectric/ui 0.0.23 → 0.0.24

package/dist/style.css

@@ -1 +1 @@
-spectric-input{--input-color: var(--spectric-input-color, #f4f4f4);--border-radius: var(--spectric-border-radius, .4em);--input-bottom: var(--spectric-input-bottom, var(--spectric-button-primary, #a8a8a8));--input-bottom-focused: var(--primary, #1ea7fd);--text-on-color: var(--spectric-text-on-color, #ffffff);--text-on-color-disabled: var(--spectric-text-on-color-disabled, #8d8d8d);--text-placeholder: rgba(22, 22, 22, .4);--text-primary: var(--spectric-text-primary, #161616);--text-secondary: var(--spectric-text-secondary, #525252)}spectric-input .inputWrapper{color:var(--text-secondary)}spectric-input .inputWrapper input{box-sizing:border-box;margin:0;vertical-align:baseline;font-size:.875rem;font-weight:400;line-height:1.28572;letter-spacing:.16px;outline:transparent solid 2px;outline-offset:-2px;border:none;padding:0 1rem;background-color:var(--input-color);color:var(--text-primary, #161616);font-family:inherit;inline-size:100%;block-size:2.5rem}spectric-input .inputWrapper .inputContainer:active:after,spectric-input .inputContainer:focus-within:after{border-bottom-color:var(--input-bottom-focused);width:calc(100% - 5px);transition:width .4s ease-in-out}spectric-input .inputWrapper input:read-only{background-color:transparent;border-bottom-color:var(--border-disabled)}spectric-input .inputContainer{position:relative;border-radius:var(--border-radius);overflow:hidden}spectric-input .inputContainer:after{content:"";width:0px;transition:background-color .4s cubic-bezier(.2,0,.38,.9),border-bottom-color .4s cubic-bezier(.2,0,.38,.9);border-bottom-color:var(--input-bottom);border-bottom-style:solid;border-bottom-width:1px;position:absolute;left:2.5px;bottom:0}spectric-input #helper-text{height:18px}spectric-input #helper-text.hidden{display:none}spectric-input .input-button-right{position:absolute;right:4px;bottom:3px}spectric-input .checkbox{display:flex;justify-self:center;align-items:center}spectric-input .checkbox spectric-button~span{padding-left:5px}spectric-input spectric-colorpicker{display:block}spectric-input[variant=color] .fieldwrapper{display:inline-block}spectric-query{font-family:monospace}spectric-query .autocomplete{color:var(--spectric-text-primary, #161616);border-radius:0em 0em var(--spectric-border-radius, .4em) var(--spectric-border-radius, .4em);background-color:var(--spectric-background, #ffffff);border:1px solid var(--spectric-background-hover, rgba(141, 141, 141, .12));max-height:300px;border-top:0px;margin:0;position:fixed;top:anchor(bottom);justify-self:anchor-center;text-align:center}spectric-query .autocomplete [popover]{overflow:visible}spectric-query .autocomplete .tooltip-content{width:100%}spectric-query .autocomplete .optiontype{float:left;max-width:10px}spectric-query .autocomplete .label{position:absolute;right:0}spectric-query .autocomplete .option.active,spectric-query .autocomplete .option:hover{background-color:var(--spectric-background-hover, rgba(141, 141, 141, .12));border-bottom:1px solid var(--primary, #1ea7fd)}spectric-query .autocomplete .option{border-bottom:1px solid transparent;padding:8px}.query-bar-date-quick-select{display:flex;justify-content:space-evenly}spectric-pagination .spectric-pagination-container{display:flex;justify-content:space-between;align-items:center}spectric-pagination .spectric-pagination-text{flex-grow:1;text-align:center}spectric-table{display:flex;flex-direction:column;overflow:hidden;line-height:1}spectric-table .table-wrapper{overflow:auto;flex-grow:1;position:relative}spectric-table tr{text-align:center}spectric-table tr.odd{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 90%)}spectric-table spectric-table-virtual-body tr:hover{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 70%)}spectric-table spectric-table-virtual-body tr{height:var(--rowHeight)}spectric-table td{padding:1px;border:1px solid transparent}spectric-table spectric-table-virtual-body td{height:var(--rowHeight)}spectric-table div[role=table]{display:table;min-width:100%}spectric-table-cell{display:contents;vertical-align:middle}spectric-table-cell td{position:relative}spectric-table td:hover:has(.hasActions){border:1px solid var(--spectric-primary, #1ea7fd)}spectric-table-cell .table-cell-actions{position:absolute;display:flex;width:100%;flex-direction:row-reverse;visibility:hidden;z-index:1}spectric-table-cell .table-cell-actions.tiny{top:-10px}spectric-table-cell .table-cell-actions.xxsmall{top:-16px}spectric-table-cell td:hover .table-cell-actions{visibility:unset}spectric-table .table-checkbox-single spectric-button{--button-border-radius: 50%}spectric-input.table-checkbox-single[checked] spectric-button{--text-on-color: transparent;border-radius:50%;position:relative}spectric-input.table-checkbox-single[checked] spectric-button:before{position:absolute;content:" ";height:50%;width:50%;left:25%;top:25%;border-radius:50%;z-index:1;box-shadow:0 0 0 4px var(--input-color)}spectric-table .cell-contents{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lineClamp,1);-webkit-box-pack:center;overflow:hidden;text-overflow:ellipsis;font-size:var(--fontSize);height:calc(var(--lineClamp) * var(--fontSize))}spectric-table-header{display:table-header-group;font-weight:700;position:sticky;top:0;left:0;z-index:1;background:var(--spectric-background, #ffffff)}spectric-table-header td{vertical-align:middle;position:relative}spectric-table-header .header-contents{position:relative}spectric-table-header .header-contents .sort-direction{position:absolute;right:2px;top:calc(50% - 8px)}spectric-table-header .header-contents.sortable{cursor:pointer;padding-right:15px}spectric-table-header .header-contents.resizing{-webkit-user-select:none;user-select:none}spectric-table-header .header-contents.sortable:hover .sort-direction.none:before{content:"⮁"}spectric-table-header td .header-resize-handle{width:2px;position:absolute;right:-1px;top:1px;visibility:hidden;background-color:var(--spectric-primary, #1ea7fd);height:100%;cursor:ew-resize;z-index:1}spectric-table-header td:hover .header-resize-handle{visibility:visible}spectric-table-header td:hover:has(*.header-resize-handle){border-bottom:1px solid var(--spectric-primary, #1ea7fd)}spectric-table-body{display:table-row-group}spectric-table-virtual-body{display:contents}spectric-table-virtual-body .virtual-scroll-spacer td{padding:0;border:0px}.spectric-popover-portal{margin:0;border:0px;padding:0;position:fixed;z-index:9999;background:transparent;pointer-events:all;--spectric-tooltip-background-color: var(--spectric-tooltip-background, var(--spectric-background,#ffffff));--spectric-tooltip-text-color: var(--spectric-tooltip-text, var(--spectric-text-primary, rgb(0, 0, 0)));--spectric-tooltip-accent-color: var(--spectric-tooltip-accent, var(--spectric-primary, #1ea7fd))}.spectric-popover-portal.spectric-tooltip-portal{pointer-events:none}.spectric-popover-portal .tooltip-container{display:flex;justify-content:center;align-items:center}.spectric-popover-portal.top .tooltip-container{flex-direction:column-reverse}.spectric-popover-portal.bottom .tooltip-container{flex-direction:column}.spectric-popover-portal.left .tooltip-container{flex-direction:row-reverse}.spectric-popover-portal .tooltip-content{background:var(--spectric-tooltip-background-color);border-radius:var(--spectric-border-radius,.4em);border:1px solid color-mix(in srgb,var(--spectric-tooltip-background-color) 90%,var(--spectric-tooltip-accent-color) 90%);box-shadow:0 0 .01em .01em color-mix(in srgb,var(--spectric-tooltip-accent-color) 90%,var(--spectric-text-on-color,#ffffff) 90%);padding:.2em;color:var(--spectric-tooltip-text-color)}.spectric-popover-portal .tooltip-caret{background:color-mix(in srgb,var(--spectric-tooltip-background-color) 90%,var(--spectric-tooltip-accent-color) 90%)}.spectric-tooltip-portal.top .tooltip-caret,.spectric-tooltip-portal.bottom .tooltip-caret{inline-size:.75rem;block-size:.374rem}.spectric-tooltip-portal.left .tooltip-caret,.spectric-tooltip-portal.right .tooltip-caret{inline-size:.375rem;block-size:.75rem}.spectric-popover-portal.top .tooltip-caret{clip-path:polygon(0 0,50% 100%,100% 0)}.spectric-popover-portal.bottom .tooltip-caret{clip-path:polygon(0 100%,50% 0,100% 100%)}.spectric-popover-portal.left .tooltip-caret{clip-path:polygon(0 0,100% 50%,0 100%)}.spectric-popover-portal.right .tooltip-caret{clip-path:polygon(0 50%,100% 0,100% 100%)}spectric-input.hue-gradient input[type=range]::-moz-range-track{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);height:15px}spectric-input.hue-gradient input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);height:15px}spectric-input.alpha-gradient input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,#fff0,#fff),repeating-conic-gradient(#fff,#fff 25%,#000 25%,#000 50%,#fff 50%,#fff 75%,#000 75%,#000) 50% / 10px 10px;height:15px}spectric-input.alpha-gradient input[type=range]::-moz-range-track{background:linear-gradient(to right,#fff0,#fff),repeating-conic-gradient(#fff,#fff 25%,#000 25%,#000 50%,#fff 50%,#fff 75%,#000 75%,#000) 50% / 10px 10px;height:15px}spectric-input.alpha-gradient input[type=range],spectric-input.hue-gradient input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none}.color-picker-footer{display:flex;justify-content:space-evenly}.color-picker-saturation-lightness-grid{cursor:crosshair}.color-picker-eyedropper{--button-border-radius:50%}.color-picker-eyedropper.hidden{display:none}spectric-calendar{display:flex;justify-content:center;--default-text-on-color:var(--spectric-text-on-color, #ffffff)}spectric-calendar .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}spectric-calendar .month-year{display:flex;align-items:center;gap:10px}spectric-calendar select{font-size:14px;padding:2px}spectric-calendar .days{display:grid;grid-template-columns:repeat(7,34px);grid-template-rows:repeat(7,34px);text-align:center;background:radial-gradient(circle at var(--x, 200%) var(--y, 200%),var(--spectric-background-inverse,#ffffff) 0%,var(--spectric-background,#f4f4f4) 25%);transition:background .1s ease;--spectric-text-on-color: var(--spectric-primary,#1ea7fd)}spectric-calendar .day{font-weight:700;padding:5px;background-color:var(--spectric-background)}spectric-calendar .date.active{--spectric-text-on-color: var(--default-text-on-color, #ffffff)}spectric-calendar .date{margin:2px}
+spectric-input{--input-color: var(--spectric-input-color, #f4f4f4);--border-radius: var(--spectric-border-radius, .4em);--input-bottom: var(--spectric-input-bottom, var(--spectric-button-primary, #a8a8a8));--input-bottom-focused: var(--primary, #1ea7fd);--text-on-color: var(--spectric-text-on-color, #ffffff);--text-on-color-disabled: var(--spectric-text-on-color-disabled, #8d8d8d);--text-placeholder: rgba(22, 22, 22, .4);--text-primary: var(--spectric-text-primary, #161616);--text-secondary: var(--spectric-text-secondary, #525252)}spectric-input .inputWrapper{color:var(--text-secondary)}spectric-input .inputWrapper input{box-sizing:border-box;margin:0;vertical-align:baseline;font-size:.875rem;font-weight:400;line-height:1.28572;letter-spacing:.16px;outline:transparent solid 2px;outline-offset:-2px;border:none;padding:0 1rem;background-color:var(--input-color);color:var(--text-primary, #161616);font-family:inherit;inline-size:100%;block-size:2.5rem}spectric-input .inputWrapper .inputContainer:active:after,spectric-input .inputContainer:focus-within:after{border-bottom-color:var(--input-bottom-focused);width:calc(100% - 5px);transition:width .4s ease-in-out}spectric-input .inputWrapper input:read-only{background-color:transparent;border-bottom-color:var(--border-disabled)}spectric-input .inputContainer{position:relative;border-radius:var(--border-radius);overflow:hidden}spectric-input .inputContainer:after{content:"";width:0px;transition:background-color .4s cubic-bezier(.2,0,.38,.9),border-bottom-color .4s cubic-bezier(.2,0,.38,.9);border-bottom-color:var(--input-bottom);border-bottom-style:solid;border-bottom-width:1px;position:absolute;left:2.5px;bottom:0}spectric-input #helper-text{height:18px}spectric-input #helper-text.hidden{display:none}spectric-input .input-button-right{position:absolute;right:4px;bottom:3px}spectric-input .checkbox{display:flex;justify-self:center;align-items:center}spectric-input .checkbox spectric-button~span{padding-left:5px}spectric-input spectric-colorpicker{display:block}spectric-input[variant=color] .fieldwrapper{display:inline-block}spectric-query{font-family:monospace}spectric-query .autocomplete{color:var(--spectric-text-primary, #161616);border-radius:0em 0em var(--spectric-border-radius, .4em) var(--spectric-border-radius, .4em);background-color:var(--spectric-background, #ffffff);border:1px solid var(--spectric-background-hover, rgba(141, 141, 141, .12));max-height:300px;border-top:0px;margin:0;position:fixed;top:anchor(bottom);justify-self:anchor-center;text-align:center}spectric-query .autocomplete [popover]{overflow:visible}spectric-query .autocomplete .tooltip-content{width:100%}spectric-query .autocomplete .optiontype{float:left;max-width:10px}spectric-query .autocomplete .label{position:absolute;right:0}spectric-query .autocomplete .option.active,spectric-query .autocomplete .option:hover{background-color:var(--spectric-background-hover, rgba(141, 141, 141, .12));border-bottom:1px solid var(--primary, #1ea7fd)}spectric-query .autocomplete .option{border-bottom:1px solid transparent;padding:8px}.query-bar-date-quick-select{display:flex;justify-content:space-evenly}spectric-query span.field-name{color:#50b8f1}spectric-query span.expression-value{color:#c5937b}spectric-query span.field-numeric{color:#bacdab}spectric-query span.wild-card{color:#a94230}spectric-query span.value-constant{color:#3a7cc5}spectric-query .syntax-highlighter{color:#bc89bd;position:absolute;z-index:100;box-sizing:border-box;font-size:.875rem;letter-spacing:.16px;padding:0 1rem;font-family:inherit;inline-size:100%;block-size:2.5rem;content:no-close-quote;vertical-align:baseline;display:flex;align-items:center;pointer-events:none}spectric-query:focus-within .syntax-highlighter{display:none}spectric-query spectric-input .inputWrapper input{color:transparent}spectric-query:focus-within spectric-input .inputWrapper input{color:initial}spectric-pagination .spectric-pagination-container{display:flex;justify-content:space-between;align-items:center}spectric-pagination .spectric-pagination-text{flex-grow:1;text-align:center}spectric-table{display:flex;flex-direction:column;overflow:hidden;line-height:1}spectric-table .table-wrapper{overflow:auto;flex-grow:1;position:relative}spectric-table tr{text-align:center}spectric-table tr.odd{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 90%)}spectric-table spectric-table-virtual-body tr:hover{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 70%)}spectric-table spectric-table-virtual-body tr{height:var(--rowHeight)}spectric-table td{padding:1px;border:1px solid transparent}spectric-table spectric-table-virtual-body td{height:var(--rowHeight)}spectric-table div[role=table]{display:table;min-width:100%}spectric-table-cell{display:contents;vertical-align:middle}spectric-table-cell td{position:relative}spectric-table td:hover:has(.hasActions){border:1px solid var(--spectric-primary, #1ea7fd)}spectric-table-cell .table-cell-actions{position:absolute;display:flex;width:100%;flex-direction:row-reverse;visibility:hidden;z-index:1}spectric-table-cell .table-cell-actions.tiny{top:-10px}spectric-table-cell .table-cell-actions.xxsmall{top:-16px}spectric-table-cell td:hover .table-cell-actions{visibility:unset}spectric-table .table-checkbox-single spectric-button{--button-border-radius: 50%}spectric-input.table-checkbox-single[checked] spectric-button{--text-on-color: transparent;border-radius:50%;position:relative}spectric-input.table-checkbox-single[checked] spectric-button:before{position:absolute;content:" ";height:50%;width:50%;left:25%;top:25%;border-radius:50%;z-index:1;box-shadow:0 0 0 4px var(--input-color)}spectric-table .cell-contents{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lineClamp,1);-webkit-box-pack:center;overflow:hidden;text-overflow:ellipsis;font-size:var(--fontSize);line-height:calc(var(--lineClamp) * var(--fontSize));height:var(--rowHeight)}spectric-table-header{display:table-header-group;font-weight:700;position:sticky;top:0;left:0;z-index:1;background:var(--spectric-background, #ffffff)}spectric-table-header td{vertical-align:middle;position:relative}spectric-table-header .header-contents{position:relative}spectric-table-header .header-contents .sort-direction{position:absolute;right:2px;top:calc(50% - 8px)}spectric-table-header .header-contents.sortable{cursor:pointer;padding-right:15px}spectric-table-header .header-contents.resizing{-webkit-user-select:none;user-select:none}spectric-table-header .header-contents.sortable:hover .sort-direction.none:before{content:"⮁"}spectric-table-header td .header-resize-handle{width:2px;position:absolute;right:-1px;top:1px;visibility:hidden;background-color:var(--spectric-primary, #1ea7fd);height:100%;cursor:ew-resize;z-index:1}spectric-table-header td:hover .header-resize-handle{visibility:visible}spectric-table-header td:hover:has(*.header-resize-handle){border-bottom:1px solid var(--spectric-primary, #1ea7fd)}spectric-table-body{display:table-row-group}spectric-table-virtual-body{display:contents}spectric-table-virtual-body .virtual-scroll-spacer td{padding:0;border:0px}.spectric-popover-portal{margin:0;border:0px;padding:0;position:fixed;z-index:9999;background:transparent;pointer-events:all;--spectric-tooltip-background-color: var(--spectric-tooltip-background, var(--spectric-background,#ffffff));--spectric-tooltip-text-color: var(--spectric-tooltip-text, var(--spectric-text-primary, rgb(0, 0, 0)));--spectric-tooltip-accent-color: var(--spectric-tooltip-accent, var(--spectric-primary, #1ea7fd))}.spectric-popover-portal.spectric-tooltip-portal{pointer-events:none}.spectric-popover-portal .tooltip-container{display:flex;justify-content:center;align-items:center}.spectric-popover-portal.top .tooltip-container{flex-direction:column-reverse}.spectric-popover-portal.bottom .tooltip-container{flex-direction:column}.spectric-popover-portal.left .tooltip-container{flex-direction:row-reverse}.spectric-popover-portal .tooltip-content{background:var(--spectric-tooltip-background-color);border-radius:var(--spectric-border-radius,.4em);border:1px solid color-mix(in srgb,var(--spectric-tooltip-background-color) 90%,var(--spectric-tooltip-accent-color) 90%);box-shadow:0 0 .01em .01em color-mix(in srgb,var(--spectric-tooltip-accent-color) 90%,var(--spectric-text-on-color,#ffffff) 90%);padding:.2em;color:var(--spectric-tooltip-text-color)}.spectric-popover-portal .tooltip-caret{background:color-mix(in srgb,var(--spectric-tooltip-background-color) 90%,var(--spectric-tooltip-accent-color) 90%)}.spectric-tooltip-portal.top .tooltip-caret,.spectric-tooltip-portal.bottom .tooltip-caret{inline-size:.75rem;block-size:.374rem}.spectric-tooltip-portal.left .tooltip-caret,.spectric-tooltip-portal.right .tooltip-caret{inline-size:.375rem;block-size:.75rem}.spectric-popover-portal.top .tooltip-caret{clip-path:polygon(0 0,50% 100%,100% 0)}.spectric-popover-portal.bottom .tooltip-caret{clip-path:polygon(0 100%,50% 0,100% 100%)}.spectric-popover-portal.left .tooltip-caret{clip-path:polygon(0 0,100% 50%,0 100%)}.spectric-popover-portal.right .tooltip-caret{clip-path:polygon(0 50%,100% 0,100% 100%)}spectric-input.hue-gradient input[type=range]::-moz-range-track{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);height:15px}spectric-input.hue-gradient input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);height:15px}spectric-input.alpha-gradient input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,#fff0,#fff),repeating-conic-gradient(#fff,#fff 25%,#000 25%,#000 50%,#fff 50%,#fff 75%,#000 75%,#000) 50% / 10px 10px;height:15px}spectric-input.alpha-gradient input[type=range]::-moz-range-track{background:linear-gradient(to right,#fff0,#fff),repeating-conic-gradient(#fff,#fff 25%,#000 25%,#000 50%,#fff 50%,#fff 75%,#000 75%,#000) 50% / 10px 10px;height:15px}spectric-input.alpha-gradient input[type=range],spectric-input.hue-gradient input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none}.color-picker-footer{display:flex;justify-content:space-evenly}.color-picker-saturation-lightness-grid{cursor:crosshair}.color-picker-eyedropper{--button-border-radius:50%}.color-picker-eyedropper.hidden{display:none}spectric-calendar{display:flex;justify-content:center;--default-text-on-color:var(--spectric-text-on-color, #ffffff)}spectric-calendar .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}spectric-calendar .month-year{display:flex;align-items:center;gap:10px}spectric-calendar select{font-size:14px;padding:2px}spectric-calendar .days{display:grid;grid-template-columns:repeat(7,34px);grid-template-rows:repeat(7,34px);text-align:center;background:radial-gradient(circle at var(--x, 200%) var(--y, 200%),var(--spectric-background-inverse,#ffffff) 0%,var(--spectric-background,#f4f4f4) 25%);transition:background .1s ease;--spectric-text-on-color: var(--spectric-primary,#1ea7fd)}spectric-calendar .day{font-weight:700;padding:5px;background-color:var(--spectric-background)}spectric-calendar .date.active{--spectric-text-on-color: var(--default-text-on-color, #ffffff)}spectric-calendar .date{margin:2px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spectric/ui",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "type": "module",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",

package/src/components/query_bar/QueryBar.css

@@ -49,4 +49,47 @@ spectric-query .autocomplete .option {
 .query-bar-date-quick-select {
     display: flex;
     justify-content: space-evenly;
+}
+spectric-query span.field-name {
+    color: #50b8f1;
+}
+
+spectric-query span.expression-value {
+    color: #c5937b;
+}
+
+spectric-query span.field-numeric {
+    color: #bacdab;
+}
+spectric-query span.wild-card {
+    color: #a94230;
+}
+spectric-query span.value-constant {
+    color: #3a7cc5;
+}
+spectric-query .syntax-highlighter{
+    color: #bc89bd;
+    position: absolute;
+    z-index: 100;
+    box-sizing: border-box;
+    font-size: .875rem;
+    letter-spacing: .16px;
+    padding: 0 1rem;
+    font-family: inherit;
+    inline-size: 100%;
+    block-size: 2.5rem;
+    content: no-close-quote;
+    vertical-align: baseline;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+}
+spectric-query:focus-within .syntax-highlighter{
+    display: none;
+}
+spectric-query spectric-input .inputWrapper input{
+    color: transparent;
+}
+spectric-query:focus-within spectric-input .inputWrapper input{
+    color: initial;
 }

package/src/components/query_bar/QueryBar.ts

@@ -19,6 +19,7 @@ import { PopoverElement } from "../tooltip/popover";
 import { DateTimePopup } from "./dateTimePopup";
 import { GeoJSONPopup } from "./geojsonPopup";
 import { DELETE, EDIT } from "../symbols";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 export type FieldTypes = {
   name: string;
   type: "string" | "number" | "boolean" | "integer" | "object";
@@ -87,7 +88,7 @@ type Completion = LabelValue & {
   start: number;
   end: number;
   type: SuggestionType;
-  onSelect?: () => Promise<string | undefined | number | LabelValue>;
+  onSelect?: () => Promise<string | undefined | number>;
 };
 export const toLabelValue = (value: LabelValueOrString) => {
   if (typeof value === "string") {
@@ -103,7 +104,7 @@ const NumberOperators: Record<string, LabelValue> = {
   gte: { value: " >= ", label: " is greater than or equal to some value" },
   lte: { value: " <= ", label: " is less than or equal to some value" },
 };
-const GeospatialOperators: Record<string, LabelValue> = {
+export const GeospatialOperators: Record<string, LabelValue> = {
   within: { value: " <@ ", label: " is contained within geometry" },
 };
 const ObjectOperators: Record<string, LabelValue> = {
@@ -137,6 +138,8 @@ export class SpectricQuery extends LitElement implements IQueryProps {
   placeholder: string = "";
   @state()
   valueHelper: any;
+  @state()
+  highlightedSyntax: any;
   constructor() {
     super();
     this.uuid = crypto.randomUUID();
@@ -322,6 +325,11 @@ export class SpectricQuery extends LitElement implements IQueryProps {
       output = kuery[this.outputLanguage](ast, this.fields);
     }
     let event = new CustomEvent("change", { detail: output });
+    if (this.value.trim().length) {
+      this.highlightedSyntax = unsafeHTML(kuery.toHTML(ast, this.fields));
+    }else{
+      this.highlightedSyntax = ""
+    }
     this.dispatchEvent(event);
   };
 
@@ -522,18 +530,22 @@ export class SpectricQuery extends LitElement implements IQueryProps {
     if (completion.onSelect) {
       let value = await completion.onSelect();
       if (value !== undefined) {
+        value = String(value);
         this.value += value;
-        setTimeout(() => {
-          this._input.focus();
-          this._showValueHelper(this._getSuggestion());
-        });
+        this._input.setSelectionRange(
+          insertIndex + value.length,
+          insertIndex + value.length
+        );
       }
     }
     this._autocomplete?.hidePopover();
     this.completionIndex = 0;
     this.completions = [];
-    this._parseQuery();
-    this._input.focus();
+    setTimeout(() => {
+      this._parseQuery();
+      this._input.focus();
+      this._showValueHelper(this._getSuggestion());
+    });
   };
   _handleArrows = (e: KeyboardEvent) => {
     if (e.key === "Escape") {
@@ -577,6 +589,7 @@ export class SpectricQuery extends LitElement implements IQueryProps {
   };
   protected render() {
     return html`
+      <div class="syntax-highlighter">${this.highlightedSyntax}</div>
       <spectric-input
         .value=${this.value}
         .placeholder=${this.placeholder}

package/src/components/query_bar/querylanguage/kuery/index.ts

@@ -28,11 +28,14 @@
  * under the License.
  */
 
-export { DQLSyntaxError } from './kuery_syntax_error';
-export { nodeTypes } from './node_types';
-export * from './ast';
-export { fromKueryExpression as parse, toOpenSearchQuery as toDSL } from './ast';
-export { toCql } from "../outputTypes/toCQL"
-export { toMongo } from "../outputTypes/toMongo"
-
-export * from './types';
+export { DQLSyntaxError } from "./kuery_syntax_error";
+export { nodeTypes } from "./node_types";
+export * from "./ast";
+export {
+  fromKueryExpression as parse,
+  toOpenSearchQuery as toDSL,
+} from "./ast";
+export { toCql } from "../outputTypes/toCQL";
+export { toMongo } from "../outputTypes/toMongo";
+export { toHTML } from "../outputTypes/toHTML";
+export * from "./types";

package/src/components/query_bar/querylanguage/outputTypes/toHTML.ts

@@ -0,0 +1,126 @@
+import { FieldTypes, GeospatialOperators, KueryNode } from "../..";
+import { wildcardSymbol } from "../kuery/node_types/wildcard";
+
+export const KQL_WILDCARD_SYMBOL = wildcardSymbol;
+export const KQL_NODE_TYPE_WILDCARD = "wildcard";
+export type FunctionName =
+  | "is"
+  | "and"
+  | "or"
+  | "not"
+  | "range"
+  | "exists"
+  | "nested";
+const and = (node: KueryNode, fields?: FieldTypes[]) => {
+  const children = node.arguments || [];
+  return (
+    "<span class='and-expression'>" +
+    children
+      .map((child: KueryNode) => {
+        return toHTML(child, fields);
+      })
+      .join(" AND ") +
+    "</span>"
+  );
+};
+const is = (node: KueryNode, fields?: FieldTypes[]) => {
+  var {
+    arguments: [fieldNameArg, valueArg, isPhrase],
+  } = node;
+  let operator = ":";
+  let value = toHTML(valueArg);
+  if (isPhrase.value) {
+    value = `"${value}"`;
+  }
+  let fieldName = toHTML(fieldNameArg);
+  if (fields && fields.find((f) => f.name === fieldName)?.type === "boolean") {
+    value = `<span class="value-constant">${valueArg.value}</span>`;
+  }
+
+  return `<span class="is-expression"><span class="field-name">${fieldName}</span>${operator}<span class="expression-value">${value}</span></span>`;
+};
+
+const or = (node: KueryNode, fields?: FieldTypes[]) => {
+  const children = node.arguments || [];
+  let args = children
+    .map((child: KueryNode) => {
+      return toHTML(child, fields);
+    })
+    .join(" OR ");
+  return `<span class="or-expression">${args}</span>`;
+};
+const not = (node: KueryNode, fields?: FieldTypes[]) => {
+  const [argument] = node.arguments;
+  return `<span class="not-expression">not ${toHTML(argument, fields)}</span>`;
+};
+
+const AST_TO_CQL = {
+  gt: ">",
+  lt: "<",
+  gte: ">=",
+  lte: "<=",
+};
+const range = (node: KueryNode) => {
+  const [fieldNameArg, operator] = node.arguments;
+  let valueArg = operator.value;
+  // @ts-ignore
+  const opsign = AST_TO_CQL[operator.name];
+  let value = toHTML(valueArg);
+  if (valueArg.type === "literal") {
+    value = `${value}`;
+  }
+  //double check that its a number else quote it
+  if (Number.isNaN(parseFloat(value))) {
+    value = `<span class="expression-value">"${value}"</span>`;
+  }
+  return `<span class="range-expression"><span class="field-name">${fieldNameArg.value}</span> ${opsign} <span class="field-numeric">${value}</span></span>`;
+};
+
+const exists = (node: KueryNode) => {
+  const [fieldNameArg] = node.arguments;
+  return `<span class="exists-expression"><span class="field-name">${fieldNameArg.value}</span>: *</span>`;
+};
+const nested = (node: KueryNode) => {
+  //nested types don't exist in CQL
+  console.warn("Nested types dont exist in CQL", node);
+  return "";
+};
+const geospatial = (node: KueryNode) => {
+  const [fieldName, operator, value] = node.arguments;
+  console.log(fieldName, operator, value);
+  let opsine = GeospatialOperators[operator].value;
+  return `<span><span class="field-name">${fieldName.value}</span> ${opsine}<span title="${value.value}">--GEOMETRY--</span></span>`;
+  if (operator === "within") return `WITHIN(${fieldName.value},${value.value})`;
+  throw Error(`Unsupported GEO Operator:${operator}`);
+};
+export const functions = {
+  is,
+  and,
+  or,
+  not,
+  range,
+  exists,
+  nested,
+  geospatial,
+};
+const nodeTypes = {
+  function: (node: KueryNode, fields?: FieldTypes[]) => {
+    // @ts-ignore
+    return functions[node.function as FunctionName](node, fields);
+  },
+  literal: (node: KueryNode) => {
+    return node.value;
+  },
+  wildcard: (node: KueryNode) => {
+    const { value } = node;
+    return `<span class="wild-card">${value
+      .split(KQL_WILDCARD_SYMBOL)
+      .join("*")}</span>`;
+  },
+};
+
+export const toHTML = (node: KueryNode, fields?: FieldTypes[]): string => {
+  //@ts-ignore
+  const nodeType = nodeTypes[node.type] as unknown as any;
+  return nodeType(node, fields);
+};

package/src/components/table/table.css

@@ -94,5 +94,6 @@ spectric-table .cell-contents{
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: var(--fontSize);
-    height: calc(var(--lineClamp) * var(--fontSize));
+    line-height: calc(var(--lineClamp) * var(--fontSize));
+    height: var(--rowHeight);
 }

package/src/stories/fixtures/ExampleContent.ts

@@ -1,108 +1,130 @@
-
-import { filterByColumn, tablecolumns, tabledata, TestData } from "./data";
+import { filterByColumn, getTableColumns, tabledata, TestData } from "./data";
 import { ExampleBits } from "./Bits";
 import { FieldTypes, SpectricQuery } from "../../components/query_bar/QueryBar";
 
-import { html, LitElement } from 'lit';
+import { html, LitElement } from "lit";
 
-import { customElement, property, query, state } from 'lit/decorators.js';
-import "./lorumipsum"
+import { customElement, property, query, state } from "lit/decorators.js";
+import "./lorumipsum";
 import { PaginationProps } from "../../components/pagination";
 import { FilterEvent } from "../../components/table/cell";
 import { TableDataOptions, SpectricTableElement } from "../../components/table";
+const tablecolumns = getTableColumns();
 type Props = {
-  frameWidth: number
-}
-@customElement('spectric-storybook-example-content')
-export class SpectricStorybookExampleContent extends LitElement implements Props {
+  frameWidth: number;
+};
+@customElement("spectric-storybook-example-content")
+export class SpectricStorybookExampleContent
+  extends LitElement
+  implements Props
+{
   protected createRenderRoot(): HTMLElement | DocumentFragment {
-    return this
+    return this;
   }
   @property({ type: Number, reflect: true })
   frameWidth: number = 10;
 
   @query("spectric-query")
-  query!: SpectricQuery
+  query!: SpectricQuery;
 
-  private dataSorter = SpectricTableElement.getDefaultDataSorterAndPaginatior<TestData>(tabledata)
+  private dataSorter =
+    SpectricTableElement.getDefaultDataSorterAndPaginatior<TestData>(tabledata);
   @state()
   dialogOpen: boolean = false;
   get tableData() {
-    return this.dataSorter(this)
+    return this.dataSorter(this);
   }
 
-  columns = tablecolumns
+  columns = tablecolumns;
   pagination: PaginationProps = {
     page: 1,
     pageSize: 3,
     size: "xsmall",
     totalItems: tabledata.length,
-  }
+  };
   _handleFilter = (e: CustomEvent<FilterEvent<any>>) => {
-    let include = e.detail.include ? "" : "not "
+    let include = e.detail.include ? "" : "not ";
     if (e.detail.column.key && e.detail.value) {
       if (this.query.value.trim() !== "") {
-        this.query.value = `${this.query.value} and ${include}${e.detail.column.key}: '${e.detail.value}'`
+        this.query.value = `${this.query.value} and ${include}${e.detail.column.key}: '${e.detail.value}'`;
       } else {
-        this.query.value = `${include}${e.detail.column.key}: '${e.detail.value}'`
+        this.query.value = `${include}${e.detail.column.key}: '${e.detail.value}'`;
       }
     }
-  }
+  };
   _handlePaginationChange = (e: CustomEvent<TableDataOptions<TestData>>) => {
-    let { pagination, columns } = e.detail
-    this.pagination = { ...this.pagination, ...pagination }
-    this.columns = columns
-    this.requestUpdate()
-  }
+    let { pagination, columns } = e.detail;
+    this.pagination = { ...this.pagination, ...pagination };
+    this.columns = columns;
+    this.requestUpdate();
+  };
   render() {
     return html`
-        <spectric-dialog
-         ?open=${this.dialogOpen} title="Are you sure you want to delete?" ?dismissable=${true} @close=${() => {
-        this.dialogOpen = false;
-      }}>
-      <lorum-ipsum></lorum-ipsum>
-      <lorum-ipsum></lorum-ipsum>
-      <lorum-ipsum></lorum-ipsum>
-      <lorum-ipsum></lorum-ipsum>
-      <lorum-ipsum></lorum-ipsum>
-      <lorum-ipsum></lorum-ipsum>
-      <lorum-ipsum></lorum-ipsum>
+      <spectric-dialog
+        ?open=${this.dialogOpen}
+        title="Are you sure you want to delete?"
+        ?dismissable=${true}
+        @close=${() => {
+          this.dialogOpen = false;
+        }}
+      >
+        <lorum-ipsum></lorum-ipsum>
+        <lorum-ipsum></lorum-ipsum>
+        <lorum-ipsum></lorum-ipsum>
+        <lorum-ipsum></lorum-ipsum>
+        <lorum-ipsum></lorum-ipsum>
+        <lorum-ipsum></lorum-ipsum>
+        <lorum-ipsum></lorum-ipsum>
         <div slot="footer" style="display:flex;justify-content: space-around;">
-        <spectric-button danger @click=${() => {
-        this.dialogOpen = false;
-        setTimeout(() => alert("deleted"), 300)
-      }}>Delete</spectric-button><spectric-button variant="text" @click=${() => {
-        this.dialogOpen = false;
-      }}>Cancel</spectric-button>
-          </div>
+          <spectric-button
+            danger
+            @click=${() => {
+              this.dialogOpen = false;
+              setTimeout(() => alert("deleted"), 300);
+            }}
+            >Delete</spectric-button
+          ><spectric-button
+            variant="text"
+            @click=${() => {
+              this.dialogOpen = false;
+            }}
+            >Cancel</spectric-button
+          >
+        </div>
       </spectric-dialog>
-        <h2>Pages in Spectric UI</h2>
-        <p>
-          We recommend building UIs with a
-          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
-            <strong>component-driven</strong> </a
-          >process starting with atomic components and ending with pages.
-        </p>
-        <spectric-panel>
-          Query
+      <h2>Pages in Spectric UI</h2>
+      <p>
+        We recommend building UIs with a
+        <a
+          href="https://componentdriven.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <strong>component-driven</strong> </a
+        >process starting with atomic components and ending with pages.
+      </p>
+      <spectric-panel>
+        Query
         <spectric-query
-          .fields=${[{ name: "modulations", type: "string" }, { name: "signal", type: "string" }] as FieldTypes[]}
+          .fields=${[
+            { name: "modulations", type: "string" },
+            { name: "signal", type: "string" },
+          ] as FieldTypes[]}
           .getValuesForField=${filterByColumn}
-          @change=${(e: CustomEvent<any>) => {
-      }}
+          @change=${(e: CustomEvent<any>) => {}}
           outputLanguage=${"toDSL"}
-          >
-        
-          </spectric-query>
-          <spectric-table 
+        >
+        </spectric-query>
+        <spectric-table
           style="height:200px;"
-          .data=${this.tableData} 
-          .columns=${tablecolumns} 
+          .data=${this.tableData}
+          .columns=${tablecolumns}
           @filter=${this._handleFilter}
           @change=${this._handlePaginationChange}
-          .pagination=${this.pagination}></spectric-table>
+          .pagination=${this.pagination}
+        ></spectric-table>
         <spectric-panel style="display:flex">
-        <spectric-bit-display
+          <spectric-bit-display
             frameWidth=${this.frameWidth}
             scale=${2}
             .arrayBuffer=${ExampleBits.buffer}
@@ -111,35 +133,70 @@ export class SpectricStorybookExampleContent extends LitElement implements Props
           >
           </spectric-bit-display>
           <spectric-splitview id="splitview-1">
-          <div style="flex-grow:1">
-          <h4>Main Settings here</h4>
-        <spectric-input variant="number" .value=${this.frameWidth} @change=${(e) => this.frameWidth = e.target.value} placeholder="frameWidth" helpertext="Adjust the framewidth" label="Frame Width" >
-            Input label
-          </spectric-input>
-          <spectric-button size="small" >Submit</spectric-button><spectric-button size="small" variant="secondary">Continue</spectric-button><spectric-button size="small" variant="text">Cancel</spectric-button>
-          </div>
-          <spectric-panel>
-            <h4>OtherSettings here</h4>
-        
-          <spectric-input variant="number" .value=${this.frameWidth} @change=${(e) => this.frameWidth = e.target.value} placeholder="frameWidth" helpertext="Adjust the framewidth" label="Frame Width" style="flex-grow:1">
-            Input label
-          </spectric-input>
-         <spectric-button size="small" >Submit</spectric-button><spectric-button size="small" variant="secondary">Continue</spectric-button><spectric-button size="small" variant="text">Cancel</spectric-button>
-          </spectric-panel>
+            <div style="flex-grow:1">
+              <h4>Main Settings here</h4>
+              <spectric-input
+                variant="number"
+                .value=${this.frameWidth}
+                @change=${(e) => (this.frameWidth = e.target.value)}
+                placeholder="frameWidth"
+                helpertext="Adjust the framewidth"
+                label="Frame Width"
+              >
+                Input label
+              </spectric-input>
+              <spectric-button size="small">Submit</spectric-button
+              ><spectric-button size="small" variant="secondary"
+                >Continue</spectric-button
+              ><spectric-button size="small" variant="text"
+                >Cancel</spectric-button
+              >
+            </div>
+            <spectric-panel>
+              <h4>OtherSettings here</h4>
+
+              <spectric-input
+                variant="number"
+                .value=${this.frameWidth}
+                @change=${(e) => (this.frameWidth = e.target.value)}
+                placeholder="frameWidth"
+                helpertext="Adjust the framewidth"
+                label="Frame Width"
+                style="flex-grow:1"
+              >
+                Input label
+              </spectric-input>
+              <spectric-button size="small">Submit</spectric-button
+              ><spectric-button size="small" variant="secondary"
+                >Continue</spectric-button
+              ><spectric-button size="small" variant="text"
+                >Cancel</spectric-button
+              >
+            </spectric-panel>
           </spectric-splitview>
-        <spectric-calendar></spectric-calendar>
+          <spectric-calendar></spectric-calendar>
         </spectric-panel>
         <div style="display:flex">
           <span style="flex-grow:1"></span>
           <spectric-input variant="color" .value=${"#00FF00"}></spectric-input>
-          <spectric-button size="small" danger @click=${() => {
-        this.dialogOpen = true
-        this.requestUpdate()
-      }}>Delete (show modal)</spectric-button>
-          <spectric-button size="small" danger variant="secondary">Override</spectric-button>
-          <spectric-button size="small" danger variant="text">Disable</spectric-button>
+          <spectric-button
+            size="small"
+            danger
+            @click=${() => {
+              this.dialogOpen = true;
+              this.requestUpdate();
+            }}
+            >Delete (show modal)</spectric-button
+          >
+          <spectric-button size="small" danger variant="secondary"
+            >Override</spectric-button
+          >
+          <spectric-button size="small" danger variant="text"
+            >Disable</spectric-button
+          >
           <spectric-button size="small" variant="text">test</spectric-button>
-          </div></spectric-panel>
-          `
+        </div></spectric-panel
+      >
+    `;
   }
-}
+}