@spectric/ui 0.0.24 → 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-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 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.24",
+  "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

@@ -68,21 +68,25 @@ spectric-query span.value-constant {
     color: #3a7cc5;
 }
 spectric-query .syntax-highlighter{
-    color: #bc89bd;
+     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%;
+    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;

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/outputTypes/toHTML.ts

@@ -1,4 +1,5 @@
 import { FieldTypes, GeospatialOperators, KueryNode } from "../..";
+import { LiteralTypeBuildNode } from "../kuery";
 import { wildcardSymbol } from "../kuery/node_types/wildcard";
 
 export const KQL_WILDCARD_SYMBOL = wildcardSymbol;
@@ -13,31 +14,26 @@ export type FunctionName =
   | "nested";
 const and = (node: KueryNode, fields?: FieldTypes[]) => {
   const children = node.arguments || [];
-  return (
+  let html =
     "<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>`;
+    "</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 `<span class="is-expression"><span class="field-name">${fieldName}</span>${operator}<span class="expression-value">${value}</span></span>`;
+  return html;
 };
 
 const or = (node: KueryNode, fields?: FieldTypes[]) => {
@@ -47,13 +43,94 @@ const or = (node: KueryNode, fields?: FieldTypes[]) => {
       return toHTML(child, fields);
     })
     .join(" OR ");
-  return `<span class="or-expression">${args}</span>`;
+  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: "<",
@@ -90,8 +167,6 @@ const geospatial = (node: KueryNode) => {
   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,

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]] })
         );
       }
     }