@spectric/ui 0.0.22 → 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}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(.filterable){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;top:-10px;z-index:1}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.22",
+  "version": "0.0.24",
   "type": "module",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",

package/src/components/input.css

@@ -78,6 +78,11 @@ spectric-input .input-button-right {
 spectric-input .checkbox{
     display: flex;
     justify-self: center;
+    align-items: center;
+}
+/* Padding for checkbox label */
+spectric-input .checkbox spectric-button ~ span{
+    padding-left: 5px;
 }
 spectric-input spectric-colorpicker{
     display: block;

package/src/components/input.ts

@@ -407,8 +407,7 @@ export class SpectricInput extends LitElement implements InputProps {
         }} icon size=${this.size || "xxsmall"} variant=${
           this.checked ? "primary" : "secondary"
         }>${this.checked ? "✓" : "\u00A0"}</spectric-button>
-          
-          ${this.label}
+          ${this.label.length ? html`<span>${this.label}</span>` : null}
         </div>
         </label>
         `;

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/cell.ts

@@ -122,16 +122,16 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
   protected render(): unknown {
     let rendered = this.getRenderedValue();
     let classes = ["cell-contents"];
-    if (this.column.filterable) {
-      classes.push("filterable");
+    if (this.column.filterable || this.column.cellActions?.length) {
+      classes.push("hasActions");
     }
-
+    const buttonSize = this.table.getCellActionButtonSize();
     let filterButtons = cache(
       this.column.filterable
-        ? html`<div class="table-cell-actions">
+        ? html`
             <spectric-button
               @click=${this._handleFilterOut}
-              size="tiny"
+              .size=${buttonSize}
               variant="text"
               icon
               tooltip="Filter Out Value"
@@ -139,15 +139,26 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
             >
             <spectric-button
               @click=${this._handleFilterFor}
-              size="tiny"
+              .size=${buttonSize}
               variant="text"
               icon
               tooltip="Filter For Value"
               >+</spectric-button
             >
-          </div>`
+          `
         : null
     );
+
+    let actions = (this.column.cellActions || []).map((action) => {
+      return html`<spectric-button
+        @click=${() => action.onClick(this.row, this.column)}
+        .size=${buttonSize}
+        variant="text"
+        icon
+        .tooltip=${action.tooltip}
+        >${action.icon}</spectric-button
+      >`;
+    });
     this.styleRules = {
       width: this.column.width ? this.column.width + "px" : null,
       whiteSpace: this.column.whiteSpace || null,
@@ -157,7 +168,9 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
         style=${styleMap(this.styleRules)}
         @mouseenter=${this._displayOverflowTooltip}
       >
-        ${filterButtons}
+        <div class="table-cell-actions ${buttonSize}">
+          ${actions} ${filterButtons}
+        </div>
         <div class=${classes.join(" ")}>
           ${this.overflow
             ? html`<spectric-tooltip .text=${this.overflow}></spectric-tooltip>`

package/src/components/table/table.css

@@ -44,7 +44,7 @@ spectric-table-cell td{
     position: relative;
 }
 
-spectric-table td:hover:has(.filterable) {
+spectric-table td:hover:has(.hasActions) {
     border: 1px solid var(--spectric-primary, #1ea7fd);
 }
 
@@ -54,9 +54,14 @@ spectric-table-cell .table-cell-actions{
     width: 100%;
     flex-direction: row-reverse;
     visibility: hidden;
-    top: -10px;
     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;
 }
@@ -89,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

@@ -14,6 +14,7 @@ import { spreadProps } from "../../utils/spread";
 import { PaginationChangeProps, PaginationProps } from "../pagination";
 import { FilterEvent } from "./cell";
 import { createSortChain } from "./sorting";
+import { ButtonSizesTypes } from "../Button";
 
 export type { TableProps, TableEvents };
 
@@ -41,6 +42,11 @@ export enum TableSortDirection {
   none = "none",
 }
 export type TableSortDirectionTypes = `${TableSortDirection}`;
+export type CellAction<T> = {
+  tooltip: DomRenderable;
+  icon: DomRenderable;
+  onClick: (row: T, column: ColumnSettings<T>) => void;
+};
 export type ColumnSettings<T> = {
   [TABLE_CREATED_SELECTION_COLUMN]?: boolean;
   width?: number;
@@ -54,6 +60,7 @@ export type ColumnSettings<T> = {
   sortDirection?: TableSortDirectionTypes;
   filterable?: boolean;
   disableCellOverflowTooltip?: boolean;
+  cellActions?: CellAction<T>[];
   title?: DomRenderable | ((table: SpectricTableElement<T>) => DomRenderable);
   /**
    * Key to used for getting data from an object for a cell
@@ -126,6 +133,11 @@ export class SpectricTableElement<T = any>
    */
   @property({ type: Number, reflect: true })
   fontSize: number = 16;
+
+  protected cellActionButtonSize: ButtonSizesTypes = "xxsmall";
+  getCellActionButtonSize() {
+    return this.cellActionButtonSize;
+  }
   static getDefaultDataSorterAndPaginatior<T>(data: T[]) {
     return (props: TableDataOptions<T>) => {
       //let sorts = props.columns.filter(column => column.sortable && column.sortDirection && column.sortDirection !== TableSortDirection.none)
@@ -322,6 +334,8 @@ export class SpectricTableElement<T = any>
   };
   private selectColumnConfig: ColumnSettings<T> = {
     [TABLE_CREATED_SELECTION_COLUMN]: true,
+    allowResize: false,
+    filterable: false,
     width: 39,
     title: (table) => {
       return table.select === "multi"