@spectric/ui 0.0.23 → 0.0.25

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;font-size:.875rem;letter-spacing:.16px;padding:0 1rem;font-family:inherit;inline-size:calc(100% - .5rem);block-size:2.5rem;content:no-close-quote;vertical-align:baseline;display:flex;align-items:center;pointer-events:none;white-space:nowrap;box-sizing:border-box}spectric-query .syntax-highlighter>*{overflow:hidden}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.25",
   "type": "module",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",

package/src/components/input.ts

@@ -250,7 +250,7 @@ export class SpectricInput extends LitElement implements InputProps {
       changedProperties.has("checked") &&
       changedProperties.get("checked") !== undefined
     ) {
-      this.dispatchEvent(new Event("change", { bubbles: true }));
+      //this.dispatchEvent(new Event("change", { bubbles: true }));
     }
   }
   @eventOptions({ capture: true })
@@ -404,6 +404,7 @@ export class SpectricInput extends LitElement implements InputProps {
         @click=${() => {
           this.checked = !this.checked;
           this.value = Boolean(this.checked);
+          this.dispatchEvent(new Event("change", { bubbles: true }));
         }} icon size=${this.size || "xxsmall"} variant=${
           this.checked ? "primary" : "secondary"
         }>${this.checked ? "✓" : "\u00A0"}</spectric-button>

package/src/components/query_bar/QueryBar.css

@@ -49,4 +49,51 @@ 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;
+    font-size: .875rem;
+    letter-spacing: .16px;
+    padding: 0 1rem;
+    font-family: inherit;
+    inline-size: calc(100% - .5rem);
+    block-size: 2.5rem;
+    content: no-close-quote;
+    vertical-align: baseline;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+    white-space: nowrap;
+    box-sizing: border-box;
+}
+spectric-query .syntax-highlighter >*{
+overflow: hidden;
+}
+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/ast/_generated_/kuery.js

@@ -266,7 +266,8 @@ function peg$parse(input, options) {
         rule:"SubQuery"
       };
     }
-    return query;
+    group++
+    return {...query,group};
   }
   function peg$f5(field, query, trailing) {
     if (query.type === 'cursor') {
@@ -384,7 +385,8 @@ function peg$parse(input, options) {
         rule:"OrListOfValues"
       };
     }
-    return (field) => buildFunctionNode('or', [partialLeft(field), partialRight(field)]);
+    group++
+    return (field) => ({...buildFunctionNode('or', [partialLeft(field), partialRight(field)]),group});
   }
   function peg$f13(partialLeft, partialRight) {
     const cursor = [partialLeft, partialRight].find(node => node.type === 'cursor');
@@ -395,7 +397,8 @@ function peg$parse(input, options) {
         rule:"AndListOfValues"
       };
     }
-    return (field) => buildFunctionNode('and', [partialLeft(field), partialRight(field)]);
+    group++
+    return (field) => ({...buildFunctionNode('and', [partialLeft(field), partialRight(field)]),group});
   }
   function peg$f14(partial) {
     if (partial.type === 'cursor') {
@@ -2234,6 +2237,7 @@ function peg$parse(input, options) {
   const buildWildcardNode = nodeTypes.wildcard.buildNode;
   const buildNamedArgNode = nodeTypes.namedArg.buildNode;
   const { wildcardSymbol } = nodeTypes.wildcard;
+  var group = 0
 
   peg$result = peg$startRuleFunction();
 

package/src/components/query_bar/querylanguage/kuery/ast/kuery.peg

@@ -11,6 +11,7 @@
   const buildWildcardNode = nodeTypes.wildcard.buildNode;
   const buildNamedArgNode = nodeTypes.namedArg.buildNode;
   const { wildcardSymbol } = nodeTypes.wildcard;
+  var group = 0
 }
 
 start
@@ -58,7 +59,8 @@ SubQuery
         rule:"SubQuery"
       };
     }
-    return query;
+    group++
+    return {...query,group};
   }
   / NestedQuery
 
@@ -203,7 +205,8 @@ OrListOfValues
         rule:"OrListOfValues"
       };
     }
-    return (field) => buildFunctionNode('or', [partialLeft(field), partialRight(field)]);
+    group++
+    return (field) => ({...buildFunctionNode('or', [partialLeft(field), partialRight(field)]),group});
   }
   / AndListOfValues
 
@@ -217,7 +220,8 @@ AndListOfValues
         rule:"AndListOfValues"
       };
     }
-    return (field) => buildFunctionNode('and', [partialLeft(field), partialRight(field)]);
+    group++
+    return (field) => ({...buildFunctionNode('and', [partialLeft(field), partialRight(field)]),group});
   }
   / NotListOfValues
 

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,201 @@
+import { FieldTypes, GeospatialOperators, KueryNode } from "../..";
+import { LiteralTypeBuildNode } from "../kuery";
+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 || [];
+  let html =
+    "<span class='and-expression'>" +
+    children
+      .map((child: KueryNode) => {
+        return toHTML(child, fields);
+      })
+      .join(" AND ") +
+    "</span>";
+  if (node.group !== undefined) {
+    try {
+      let { fieldName, values } = groupVariables(children);
+      return `<span class="or-expression">${fieldName}:(${values.join(
+        " OR "
+      )})</span>`;
+    } catch (error) {
+      console.log(error);
+    }
+    return `( ${html} )`;
+  }
+  return html;
+};
+
+const or = (node: KueryNode, fields?: FieldTypes[]) => {
+  const children = node.arguments || [];
+  let args = children
+    .map((child: KueryNode) => {
+      return toHTML(child, fields);
+    })
+    .join(" OR ");
+  let html = `<span class="or-expression">${args}</span>`;
+  if (node.group !== undefined) {
+    try {
+      let { fieldName, values } = groupVariables(children);
+      return `<span class="or-expression">${fieldName}:(${values.join(
+        " OR "
+      )})</span>`;
+    } catch (error) {
+      console.log(error);
+    }
+    return `( ${html} )`;
+  }
+
+  return html;
+};
+
+const extractLiteralValue = (
+  fieldName: string,
+  valueArg: LiteralTypeBuildNode,
+  isPhrase: LiteralTypeBuildNode,
+  fields?: FieldTypes[]
+) => {
+  let value = toHTML(valueArg);
+  if (isPhrase.value) {
+    value = `"${value}"`;
+  }
+  if (fields && fields.find((f) => f.name === fieldName)?.type === "boolean") {
+    value = `<span class="value-constant">${valueArg.value}</span>`;
+  }
+  return `<span class="expression-value">${value}</span>`;
+};
+const extractFieldName = (fieldNameArg: any) => {
+  let fieldName = toHTML(fieldNameArg);
+  return `<span class="field-name">${fieldName}</span>`;
+};
+const is = (node: KueryNode, fields?: FieldTypes[]) => {
+  var {
+    arguments: [fieldNameArg, valueArg, isPhrase],
+  } = node;
+  let operator = ":";
+  let fieldName = extractFieldName(fieldNameArg);
+  let value = extractLiteralValue(fieldName, valueArg, isPhrase, fields);
+  return `<span class="is-expression">${fieldName}${operator}${value}</span>`;
+};
+
+const not = (node: KueryNode, fields?: FieldTypes[]) => {
+  const [argument] = node.arguments;
+  return `<span class="not-expression">not ${toHTML(argument, fields)}</span>`;
+};
+
+const groupVariables = (
+  nodes: KueryNode[],
+  fieldName: string | undefined = undefined,
+  fields?: FieldTypes[]
+) => {
+  let values: string[] = [];
+  if (!fieldName && nodes[0].function == "is") {
+    fieldName = extractFieldName(nodes[0].arguments[0]);
+  }
+  if (!fieldName) {
+    throw Error(
+      "Cannot group variables because they don't have a groupable field"
+    );
+  }
+  for (let node of nodes) {
+    var {
+      arguments: [fieldNameArg, valueArg, isPhrase],
+    } = node;
+    if (node.function == "is") {
+      if (extractFieldName(fieldNameArg) !== fieldName) {
+        throw Error(
+          "Cannot group variables because they aren't for the same field"
+        );
+      }
+      let value = extractLiteralValue(fieldName, valueArg, isPhrase, fields);
+      values.push(value);
+    } else if (node.function === "or" || node.function === "and") {
+      let grouped = groupVariables(node.arguments, fieldName, fields);
+      values.push(...grouped.values);
+    } else {
+      throw Error(
+        "Cannot group variables because they aren't for the same field"
+      );
+    }
+  }
+  return { fieldName, values };
+};
+
+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>`;
+};
+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/components/table/table.ts

@@ -258,6 +258,7 @@ export class SpectricTableElement<T = any>
     );
     if (index !== -1) {
       this.columns[index] = { ...this.selectColumnConfig };
+      this.columns = [...this.columns];
     }
   }
   setSelected(selected: T[]) {
@@ -268,13 +269,11 @@ export class SpectricTableElement<T = any>
     return this.selected;
   }
   deselectAll() {
-    this.selected = [];
-    this.forceRefreshofSelectionColumn();
+    this.setSelected([]);
     this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }));
   }
   selectAll() {
-    this.selected = [...this.data];
-    this.forceRefreshofSelectionColumn();
+    this.setSelected([...this.data]);
     this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }));
   }
   async scrollToRow(row: T | number) {
@@ -337,11 +336,14 @@ export class SpectricTableElement<T = any>
     allowResize: false,
     filterable: false,
     width: 39,
-    title: (table) => {
-      return table.select === "multi"
+    title: (table: SpectricTableElement<T>) => {
+      return table.select === TableSelectOptions.multi
         ? html`<spectric-input
             variant="checkbox"
             @change=${table._handleSelectAllChange}
+            ${spreadProps({
+              checked: table.selected.length === table.data.length,
+            })}
             .helperText=${"Select All"}
           ></spectric-input>`
         : null;
@@ -366,10 +368,10 @@ export class SpectricTableElement<T = any>
           if (e.target.checked) {
             if (table.select === "single") {
               table.selected = [];
-              table.forceRefreshofSelectionColumn();
             }
             table.selected.push(row);
           }
+          table.setSelected([...table.selected]);
           table.dispatchEvent(
             new CustomEvent("selected", { detail: [...table.selected] })
           );
@@ -395,10 +397,29 @@ export class SpectricTableElement<T = any>
       }
     }
     if (changedProperties.has("select")) {
-      if (this.select === "single" && this.selected.length > 1) {
-        this.selected = [this.selected[0]];
+      let selectIndex = this.columns.findIndex(
+        (col) => col[TABLE_CREATED_SELECTION_COLUMN]
+      );
+      if (this.select !== TableSelectOptions.none) {
+        this.forceRefreshofSelectionColumn();
+        if (!this.columns.find((col) => col[TABLE_CREATED_SELECTION_COLUMN])) {
+          this.columns.unshift(this.selectColumnConfig);
+          this.columns = [...this.columns];
+        }
+      } else {
+        if (selectIndex !== -1) {
+          this.columns.splice(selectIndex, 1);
+          this.columns = [...this.columns];
+          this.setSelected([]);
+        }
+      }
+      if (
+        this.select === TableSelectOptions.single &&
+        this.selected.length > 1
+      ) {
+        this.setSelected([this.selected[0]]);
         this.dispatchEvent(
-          new CustomEvent("selected", { detail: [...this.selected] })
+          new CustomEvent("selected", { detail: [this.selected[0]] })
         );
       }
     }