@spectric/ui 0.0.24 → 0.0.26

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-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}
+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 1.7rem 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:unset}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.virtual-scroll-spacer:hover{background-color:unset}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.24",
+  "version": "0.0.26",
   "type": "module",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",

package/src/components/input.ts

@@ -81,6 +81,8 @@ export interface InputProps {
    * The sets the autocomplete for the input.
    */
   autocomplete?: HTMLInputElement["autocomplete"];
+
+  spellcheck?: HTMLInputElement["spellcheck"];
 }
 @customElement("spectric-input")
 export class SpectricInput extends LitElement implements InputProps {
@@ -169,6 +171,13 @@ export class SpectricInput extends LitElement implements InputProps {
    */
   @property({ reflect: true })
   autocomplete: HTMLInputElement["autocomplete"] = "off";
+
+  /**
+   * The sets the autocomplete for the input.
+   */
+  @property({ reflect: true, type: Boolean })
+  spellcheck: HTMLInputElement["spellcheck"] = true;
+
   get selectionStart() {
     if (!this._input) {
       return null;
@@ -250,7 +259,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 })
@@ -306,6 +315,7 @@ export class SpectricInput extends LitElement implements InputProps {
                   pattern="${ifNonEmpty(this.pattern)}"
                   placeholder="${ifNonEmpty(this.placeholder)}"
                   autocomplete="${ifNonEmpty(this.autocomplete)}"
+                  spellcheck=${this.spellcheck}
                   ?readonly="${this.readonly}"
                   ?required="${this.required}"
                   type="${ifNonEmpty(
@@ -404,6 +414,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

@@ -1,95 +1,98 @@
 spectric-query {
-    font-family: monospace
+  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, 0.12));
-    max-height: 300px;
-    border-top: 0px;
-    margin: 0px;
-    /*Input helper text is 18px we can cover that with the popover*/
-    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%;
+  color: var(--spectric-text-primary, #161616);
+  border-radius: 0em 0em var(--spectric-border-radius, 0.4em)
+    var(--spectric-border-radius, 0.4em);
+  background-color: var(--spectric-background, #ffffff);
+  border: 1px solid var(--spectric-background-hover, rgba(141, 141, 141, 0.12));
+  max-height: 300px;
+  border-top: 0px;
+  margin: 0px;
+  /*Input helper text is 18px we can cover that with the popover*/
+  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;
-    /*todo should we display an icon instead of text?*/
+  float: left;
+  max-width: 10px;
+  /*todo should we display an icon instead of text?*/
 }
 
 spectric-query .autocomplete .label {
-    position: absolute;
-    right: 0;
+  position: absolute;
+  right: 0;
 }
 
 spectric-query .autocomplete .option.active,
 spectric-query .autocomplete .option:hover {
-    background-color: var(--spectric-background-hover, rgba(141, 141, 141, 0.12));
-    border-bottom: 1px solid var(--primary, #1ea7fd);
+  background-color: var(--spectric-background-hover, rgba(141, 141, 141, 0.12));
+  border-bottom: 1px solid var(--primary, #1ea7fd);
 }
 
 spectric-query .autocomplete .option {
-    border-bottom: 1px solid transparent;
-    padding: 8px;
+  border-bottom: 1px solid transparent;
+  padding: 8px;
 }
 
 .query-bar-date-quick-select {
-    display: flex;
-    justify-content: space-evenly;
+  display: flex;
+  justify-content: space-evenly;
 }
 spectric-query span.field-name {
-    color: #50b8f1;
+  color: #50b8f1;
 }
 
 spectric-query span.expression-value {
-    color: #c5937b;
+  color: #c5937b;
 }
 
 spectric-query span.field-numeric {
-    color: #bacdab;
+  color: #bacdab;
 }
 spectric-query span.wild-card {
-    color: #a94230;
+  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;
-}
+  color: #3a7cc5;
+}
+spectric-query .syntax-highlighter {
+  color: #bc89bd;
+  position: absolute;
+  z-index: 100;
+  font-size: 0.875rem;
+  letter-spacing: 0.16px;
+  padding: 0 1.7rem 0 1rem;
+  font-family: inherit;
+  inline-size: calc(100% - 0.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: unset;
+}

package/src/components/query_bar/QueryBar.ts

@@ -48,7 +48,7 @@ export enum SupportedLanguages {
   AST = "AST",
 }
 type SupportedLanguagesTypes = `${SupportedLanguages}`;
-interface QueryEventMap {
+export interface QueryEventMap {
   change: (event: CustomEvent<string | kuery.KueryNode | JsonObject>) => void;
 }
 
@@ -159,13 +159,13 @@ export class SpectricQuery extends LitElement implements IQueryProps {
   @property({ type: String, reflect: true })
   value = "";
   @property({ type: String, reflect: true })
-  outputLanguage: SupportedLanguagesTypes = "AST";
+  outputLanguage?: SupportedLanguagesTypes = "AST";
   @state()
   private completions: Completion[] = [];
   @state()
   private completionIndex = 0;
   @property({ type: Array, reflect: true })
-  fields: FieldTypes[] = [];
+  fields?: FieldTypes[] = [];
 
   @query(".autocomplete")
   _autocomplete?: PopoverElement;
@@ -188,6 +188,7 @@ export class SpectricQuery extends LitElement implements IQueryProps {
       suggestion = this._getSuggestion();
     } catch (error) {
       console.log(error);
+      this._autocomplete?.hidePopover();
     }
     if (!suggestion) {
       return;
@@ -221,9 +222,8 @@ export class SpectricQuery extends LitElement implements IQueryProps {
     if (!suggestion || suggestion.start === suggestion.end) {
       return;
     }
-    let field = this.fields.find(
-      (field) => field.name === suggestion.fieldName
-    );
+    let fields = this.fields || [];
+    let field = fields.find((field) => field.name === suggestion.fieldName);
 
     if (!field) {
       return;
@@ -306,11 +306,12 @@ export class SpectricQuery extends LitElement implements IQueryProps {
         let suggestions = this._getSuggestion();
         this.autoComplete(suggestions);
       } catch (error: any) {
+        this.completions = [];
+        this._autocomplete?.hidePopover();
         // this.completions = []
         // this._input.invalid = true;
         // let [expect, _, arrow] = e.message.split("\n")
         // this._input.invalidText = html`&#160;&#160;${arrow} ${expect}`;
-        return;
       }
     }
     try {
@@ -322,13 +323,13 @@ export class SpectricQuery extends LitElement implements IQueryProps {
     if (this.outputLanguage == "AST") {
       output = ast;
     } else {
-      output = kuery[this.outputLanguage](ast, this.fields);
+      output = kuery[this.outputLanguage || "toDSL"](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 = ""
+    } else {
+      this.highlightedSyntax = "";
     }
     this.dispatchEvent(event);
   };
@@ -359,8 +360,9 @@ export class SpectricQuery extends LitElement implements IQueryProps {
           }))
         );
       }
+      let fields = this.fields || [];
       if (type === "field") {
-        let fieldCompletions = this.fields
+        let fieldCompletions = fields
           .filter(
             (field) =>
               field.name.includes(suggestion.fieldName) ||
@@ -373,7 +375,7 @@ export class SpectricQuery extends LitElement implements IQueryProps {
         completions.push(...fieldCompletions);
       }
       if (type === "operator") {
-        let fieldType = this.fields.find(
+        let fieldType = fields.find(
           (field) => field.name === suggestion.fieldName
         );
         if (fieldType) {
@@ -456,7 +458,7 @@ export class SpectricQuery extends LitElement implements IQueryProps {
         }
       }
       if (type === "value") {
-        let fieldType = this.fields.find(
+        let fieldType = (this.fields || []).find(
           (field) => field.name === suggestion.fieldName
         );
         if (
@@ -505,10 +507,14 @@ export class SpectricQuery extends LitElement implements IQueryProps {
       this._autocomplete?.hidePopover();
     }
   }
-  protected updated(changed: PropertyValues): void {
+  protected update(changed: PropertyValues): void {
     if (changed.has("outputLanguage")) {
       this._parseQuery();
     }
+    if (changed.has("value")) {
+      this._parseQuery();
+    }
+    super.update(changed);
   }
   _selectCompletion = async () => {
     if (!this.suggestion) {
@@ -595,10 +601,14 @@ export class SpectricQuery extends LitElement implements IQueryProps {
         .placeholder=${this.placeholder}
         style=${`anchor-name:--${this.uuid};`}
         autocomplete="off"
+        .spellcheck=${false}
         @input=${this._parseQuery}
         @keydown=${this._handleArrows}
         @change=${(e: Event) => e.stopPropagation()}
         @click=${this._checkClickLocation}
+        @blur=${() => {
+          this._autocomplete?.hidePopover();
+        }}
       ></spectric-input>
       <spectric-popover
         class="valueHelper"

package/src/components/query_bar/__tests__/test_highlighting.spec.ts

@@ -0,0 +1,101 @@
+import { test, expect } from "@playwright/test";
+import type {
+  SpectricQuery,
+  QueryEventMap,
+  KueryNode,
+  JsonObject,
+} from "../index";
+import type SpectricModule from "../../../index.ts";
+import { SpectricInput } from "../../../index.ts";
+test.beforeEach(async ({ page }) => {
+  page.on("console", (msg) => {
+    console.log(`Page[${msg.type()}]:` + msg.text());
+  });
+  await page.addInitScript(() => {
+    //@ts-ignore
+    window.awaitEvent = function awaitEvent(target, event, trigger) {
+      return new Promise((resolve, reject) => {
+        let timeout = setTimeout(reject, 400);
+        const handleEvent = (...args) => {
+          clearTimeout(timeout);
+          //@ts-ignore
+          target.removeEventListener(event, handleEvent);
+          resolve(args);
+        };
+        //@ts-ignore
+        target.addEventListener(event, handleEvent, { once: true });
+        trigger();
+      });
+    };
+  });
+});
+
+type HighlightResponse = {
+  query: string;
+  query_ast: KueryNode;
+  highlight_ast: KueryNode;
+};
+
+test.describe("Spectric Querybar Highlight Tests", () => {
+  test("Ensure the highlighted syntax outputs the same AST as the input (except geoqueries those are truncated)", async ({
+    page,
+  }) => {
+    await page.goto(
+      "http://localhost:6006/iframe.html?globals=&args=&id=spectric-ui-components-ui-query--basic&viewMode=story"
+    );
+    let queryBar = page.locator("spectric-query");
+    await queryBar.waitFor();
+    let responses = await queryBar.evaluate<HighlightResponse[], SpectricQuery>(
+      async (queryBar) => {
+        queryBar.outputLanguage = "AST";
+        const TEST_QUERYS = [
+          `test:"test"`,
+          `test:("works" or "still works")`,
+          `test:("works" and "still works")`,
+          `(test:"works" and test_num > 10) or (modulation:("FM" or "AM") and test_num < 5)`,
+          `( ("value" OR "value2") AND "value3" )`,
+        ];
+        const output: HighlightResponse[] = [];
+        for (let query of TEST_QUERYS) {
+          queryBar.value = "";
+          await new Promise((resolve) => setTimeout(resolve, 100));
+          let [event] = (await window.awaitEvent<QueryEventMap>(
+            queryBar,
+            "change",
+            () => (queryBar.value = query)
+          )) as Parameters<QueryEventMap["change"]>;
+          let highlightedSyntax = queryBar.querySelector<HTMLDivElement>(
+            ".syntax-highlighter"
+          )!.innerText;
+          queryBar.value = "";
+          await new Promise((resolve) => setTimeout(resolve, 100));
+          let [highlightedEvent] = (await window.awaitEvent<QueryEventMap>(
+            queryBar,
+            "change",
+            () => (queryBar.value = highlightedSyntax)
+          )) as Parameters<QueryEventMap["change"]>;
+          await new Promise((resolve) => setTimeout(resolve, 100));
+          output.push({
+            query,
+            query_ast: event.detail as KueryNode,
+            highlight_ast: highlightedEvent.detail as KueryNode,
+          });
+        }
+        return output;
+      }
+    );
+    for (let { query, query_ast, highlight_ast } of responses) {
+      expect(highlight_ast, query).toMatchObject(query_ast);
+    }
+  });
+});
+
+declare global {
+  interface Window {
+    awaitEvent: <EventMap extends Record<string, any>, K = keyof EventMap>(
+      target: HTMLElement,
+      event: K,
+      trigger: () => void
+    ) => Parameters<EventMap[keyof EventMap]>;
+  }
+}

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 → kuery.peggy}

@@ -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