@spectric/ui 0.0.26 → 0.0.27

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;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}
+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 th{vertical-align:middle;position:relative;overflow:hidden}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 th .header-resize-handle{width:6px;position:absolute;right:-1px;top:1px;visibility:hidden;height:100%;cursor:ew-resize;z-index:1}spectric-table-header th .header-resize-handle:before{width:2px;position:absolute;top:1px;background-color:var(--spectric-primary, #1ea7fd);height:100%;content:"";z-index:1}spectric-table-header th:hover .header-resize-handle{visibility:visible}spectric-table-header th:has(*.header-resize-handle):hover:after{content:"";bottom:0;width:100%;background-color:var(--spectric-primary, #1ea7fd);height:1px;display:block;position:absolute}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.26",
+  "version": "0.0.27",
   "type": "module",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",

package/src/components/table/header.css

@@ -1,54 +1,69 @@
-
-spectric-table-header{
-    display: table-header-group;
-    font-weight: bold;
-    position: sticky;
-    top: 0px;
-    left: 0px;
-    z-index: 1;
-    background: var(--spectric-background, #ffffff);
-}
-spectric-table-header td {
-    vertical-align: middle;
-    position: relative;
+spectric-table-header {
+  display: table-header-group;
+  font-weight: bold;
+  position: sticky;
+  top: 0px;
+  left: 0px;
+  z-index: 1;
+  background: var(--spectric-background, #ffffff);
+}
+spectric-table-header th {
+  vertical-align: middle;
+  position: relative;
+  overflow: hidden;
 }
 spectric-table-header .header-contents {
-    position: relative;
+  position: relative;
 }
 
 spectric-table-header .header-contents .sort-direction {
-    position: absolute;
-    right: 2px;
-    top: calc(50% - 8px)
+  position: absolute;
+  right: 2px;
+  top: calc(50% - 8px);
 }
 spectric-table-header .header-contents.sortable {
-    cursor: pointer;
-    padding-right:15px
+  cursor: pointer;
+  padding-right: 15px;
 }
 spectric-table-header .header-contents.resizing {
-    user-select: none;
+  user-select: none;
 }
-spectric-table-header .header-contents.sortable:hover .sort-direction.none::before
- {
-    content: "\2B81";
+spectric-table-header
+  .header-contents.sortable:hover
+  .sort-direction.none::before {
+  content: "\2B81";
 }
 
-
-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 th .header-resize-handle {
+  width: 6px;
+  position: absolute;
+  right: -1px;
+  top: 1px;
+  visibility: hidden;
+  height: 100%;
+  cursor: ew-resize;
+  z-index: 1;
+}
+spectric-table-header th .header-resize-handle::before {
+  width: 2px;
+  position: absolute;
+  top: 1px;
+  background-color: var(--spectric-primary, #1ea7fd);
+  height: 100%;
+  content: "";
+  z-index: 1;
+}
+spectric-table-header th:hover .header-resize-handle {
+  visibility: visible;
 }
 
-spectric-table-header td:hover .header-resize-handle{
-    visibility: visible;
+spectric-table-header th:has(*.header-resize-handle):hover::after {
+  content: "";
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  background-color: var(--spectric-primary, #1ea7fd);
+  height: 1px;
+  display: block;
+  position: absolute;
 }
-spectric-table-header td:hover:has(*.header-resize-handle) {
-    border-bottom: 1px solid var(--spectric-primary, #1ea7fd);
-}

package/src/components/table/header.ts

@@ -39,7 +39,7 @@ export class TableHeaderElement<T>
     this.addDisposableListener(
       () => document.body,
       "mouseup",
-      this._handleResizeEnd
+      this._handleResizeEnd,
     );
   }
   protected createRenderRoot(): HTMLElement | DocumentFragment {
@@ -68,7 +68,7 @@ export class TableHeaderElement<T>
         composed: true,
         bubbles: true,
         detail: column,
-      })
+      }),
     );
   };
   _handleResizeStart = (event: MouseEvent, column: ColumnSettings<T>) => {
@@ -83,13 +83,13 @@ export class TableHeaderElement<T>
       this._resizeStart.column.width = this._resizeStart.column.width + delta;
     } else {
       let cell = (this._resizeStart.event.target as HTMLDivElement).closest(
-        "td"
+        "th",
       ) as HTMLTableCellElement;
       this._resizeStart.column.width =
         cell.getBoundingClientRect().width + delta;
     }
     this.dispatchEvent(
-      new CustomEvent("columnResize", { detail: this._resizeStart.column })
+      new CustomEvent("columnResize", { detail: this._resizeStart.column }),
     );
     //We wrap this to ensure any sort events get fired before we are done FIXME?
     requestAnimationFrame(() => {
@@ -128,8 +128,8 @@ export class TableHeaderElement<T>
       column.sortDirection === TableSortDirection.ascending
         ? ARROW_UP
         : column.sortDirection == TableSortDirection.descending
-        ? ARROW_DOWN
-        : ``;
+          ? ARROW_DOWN
+          : ``;
     let sortClass = column.sortDirection || TableSortDirection.none;
     let resizable = column.allowResize || column.allowResize === undefined;
     let resizeHandle = resizable
@@ -145,7 +145,7 @@ export class TableHeaderElement<T>
     if (typeof title == "function") {
       title = title(this.table) || undefined;
     }
-    return html` <td
+    return html` <th
       @click=${() => this._handleSortChange(column)}
       style="${columnWidth}"
     >
@@ -154,7 +154,7 @@ export class TableHeaderElement<T>
         ${title}
         <span class="sort-direction ${sortClass}">${sortDirection}</span>
       </div>
-    </td>`;
+    </th>`;
   }
 }
 

package/src/components/table/table.ts

@@ -135,6 +135,9 @@ export class SpectricTableElement<T = any>
   @property({ type: Number, reflect: true })
   fontSize: number = 16;
 
+  @property({ type: Number, reflect: false })
+  virtualBodyBuffer: number = 100;
+
   /**
    * Function that allows you to set the row class name programatically
    */
@@ -451,6 +454,7 @@ export class SpectricTableElement<T = any>
             @columnResize=${this._handleColumnResize}
           ></spectric-table-header>
           <spectric-table-virtual-body
+            .buffer=${this.virtualBodyBuffer}
             .columns=${columns}
             .data=${this.data}
             .table=${this}

package/src/components/table/virtualBody.ts

@@ -41,6 +41,8 @@ export class TableVirtualBodyElement<T>
   @property({ type: Object, attribute: false })
   table!: SpectricTableElement<T>;
   columnsMeasured: boolean = false;
+  @property({ type: Number, attribute: false })
+  buffer: number = 100;
   constructor() {
     super();
     let lastScroll = 0;
@@ -86,42 +88,26 @@ export class TableVirtualBodyElement<T>
   }
   protected render(): unknown {
     let totalRows = this.data.length;
-    let buffer = 10; // Have a buffer of rows to prevent column jitter
-    let headerHeight = this.table.querySelector(
-      "spectric-table-header",
-    )!.clientHeight;
+    let buffer = this.buffer / 2; // Have a buffer of rows to prevent column jitter
     let viewport = this.table.querySelector(".table-wrapper")!;
-    let startIndex = Math.max(this.startIndex, 0);
-    const rowsThatFit = Math.ceil(
-      (viewport.clientHeight - headerHeight) / this.rowHeight,
+    const scrollTop = viewport.scrollTop;
+    const start = Math.max(0, Math.floor(scrollTop / this.rowHeight) - buffer);
+    const end = Math.min(
+      totalRows,
+      Math.ceil((scrollTop + viewport.clientHeight) / this.rowHeight) + buffer,
     );
-    const endIndex = Math.min(startIndex + rowsThatFit + buffer, totalRows);
-    const visibleRows = endIndex - startIndex;
     let totalHeight = totalRows * this.rowHeight;
-    let beforeHeight =
-      startIndex * this.rowHeight +
-      (viewport.scrollTop - startIndex * this.rowHeight);
-    if (endIndex === totalRows) {
-      beforeHeight = startIndex * this.rowHeight;
-    }
-    let visibleHeight = visibleRows * this.rowHeight;
-    let afterHeight = totalHeight - beforeHeight - visibleHeight;
-    let spacerElementBefore =
-      startIndex != 0
-        ? html` <tr
-            style="height:${beforeHeight}px"
-            class="virtual-scroll-spacer"
-          >
-            <td colspan="${this.columns.length}"></td>
-          </tr>`
-        : null;
+    let beforeHeight = start * this.rowHeight;
+    let afterHeight = (totalRows - end) * this.rowHeight;
 
+    let spacerElementBefore = html` <tr
+      style="height:${beforeHeight}px"
+      class="virtual-scroll-spacer"
+    ></tr>`;
     let spacerElementAfter = html` <tr
       style="height:${afterHeight}px"
       class="virtual-scroll-spacer"
-    >
-      <td colspan="${this.columns.length}"></td>
-    </tr>`;
+    ></tr>`;
     return html`
       <div
         style="height:${totalHeight}px;position: absolute;overflow-x: hidden;overflow-y: hidden;z-index:-1;width:1px;"
@@ -129,20 +115,16 @@ export class TableVirtualBodyElement<T>
       <tbody>
         ${spacerElementBefore}
       </tbody>
-      <div
-        style="display:table-row-group;max-height:${visibleHeight}px; overflow:hidden;"
-      >
+      <div style="display:table-row-group;overflow:hidden;">
         ${repeat(
-          this.data.slice(Math.max(startIndex, 0), endIndex),
+          this.data.slice(Math.max(start, 0), end),
           (row, index) =>
-            html` <tr
-              class="${this.table.getRowClass(row, index + startIndex)}"
-            >
+            html` <tr class="${this.table.getRowClass(row, index + start)}">
               ${repeat(this.columns, (col) => {
                 return html`<spectric-table-cell
                   .column=${col}
                   .row=${row}
-                  .index=${index + startIndex}
+                  .index=${index + start}
                   .columns=${this.columns}
                   .table=${this.table}
                 ></spectric-table-cell>`;
@@ -151,7 +133,7 @@ export class TableVirtualBodyElement<T>
         )}
       </div>
       <tbody>
-        ${afterHeight > 0 ? spacerElementAfter : null}
+        ${spacerElementAfter}
       </tbody>
     `;
   }