@spectric/ui 0.0.15 → 0.0.17

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[variant=password] spectric-button{position:absolute;right:4px;bottom:3px}spectric-input .checkbox{display:flex;justify-self:center}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:-18px 0 0;position:fixed;top:anchor(bottom);justify-self:anchor-center;text-align:center}spectric-query .autocomplete .optiontype{float:left;max-width:10px}spectric-query .autocomplete .label{position:absolute;right:0}spectric-query .autocomplete .option.active,spectric-query .autocomplete .option:hover{background-color:var(--spectric-background-hover, rgba(141, 141, 141, .12));border-bottom:1px solid var(--primary, #1ea7fd)}spectric-query .autocomplete .option{border-bottom:1px solid transparent;padding:8px}.query-bar-date-quick-select{display:flex;justify-content:space-evenly}spectric-pagination .spectric-pagination-container{display:flex;justify-content:space-between;align-items:center}spectric-pagination .spectric-pagination-text{flex-grow:1;text-align:center}spectric-table{display:flex;flex-direction:column;overflow:hidden}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 tr:hover{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 70%)}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}spectric-table tr{line-height:var(--rowHeight)}spectric-table td{height:var(--rowHeight)}spectric-table-header .header-contents{position:relative}spectric-table-header .header-contents .sort-direction{position:absolute;right:0;top:calc(50% - 8px)}spectric-table-header .header-contents.sortable{cursor:pointer;padding-right:15px}spectric-table-header .header-contents.sortable:hover .sort-direction.none:before{content:"⮁"}spectric-table div[role=table]{display:table;min-width:100%}spectric-table-cell{display:contents;vertical-align:middle}spectric-table-cell td{position:relative}spectric-table td:hover:has(.filterable){border:1px solid var(--spectric-primary, #1ea7fd)}spectric-table td{border:1px solid transparent}spectric-table-cell .table-cell-actions{position:absolute;display:flex;width:100%;flex-direction:row-reverse;visibility:hidden;top:-10px}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-body{display:table-row-group}spectric-table-virtual-body{display:contents}spectric-table-virtual-body .virtual-scroll-spacer td{padding:0;border:0px}.spectric-tooltip-portal{position:fixed;z-index:9999;pointer-events:none;--spectric-tooltip-background: color-mix(in srgb,var(--spectric-background-inverse,#f4f4f4) 100%,var(--spectric-primary,#1ea7fd) 90%) }.spectric-tooltip-portal .tooltip-container{display:flex;justify-content:center;align-items:center}.spectric-tooltip-portal.top .tooltip-container{flex-direction:column-reverse}.spectric-tooltip-portal.bottom .tooltip-container{flex-direction:column}.spectric-tooltip-portal.left .tooltip-container{flex-direction:row-reverse}.spectric-tooltip-portal .tooltip-content{background:var(--spectric-tooltip-background);border-radius:var(--spectric-border-radius,.4em);box-shadow:0 0 .01em .01em color-mix(in srgb,var(--spectric-background-hover,rgba(141, 141, 141, .12)) 90%,var(--spectric-text-on-color,#ffffff) 90%);padding:.2em;color:var(--spectric-text-on-color,#ffffff)}.spectric-tooltip-portal .tooltip-caret{background:var(--spectric-tooltip-background)}.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-tooltip-portal.top .tooltip-caret{clip-path:polygon(0 0,50% 100%,100% 0)}.spectric-tooltip-portal.bottom .tooltip-caret{clip-path:polygon(0 100%,50% 0,100% 100%)}.spectric-tooltip-portal.left .tooltip-caret{clip-path:polygon(0 0,100% 50%,0 100%)}.spectric-tooltip-portal.right .tooltip-caret{clip-path:polygon(0 50%,100% 0,100% 100%)}
+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.hue-gradient input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.saturation-lightness-grid{background:linear-gradient(to right,hsl(var(--accent-color),0%,50%),hsl(var(--accent-color),100%,50%)),linear-gradient(to top,hsl(var(--accent-color),100%,0%),hsl(var(--accent-color),100%,50%),hsl(var(--accent-color),100%,100%))}spectric-input.alpha-gradient input[type=range]::-webkit-slider-runnable-track{background-image:linear-gradient(to right,#fff0,#fff)}spectric-input.alpha-gradient input[type=range],spectric-input.hue-gradient input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none}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[variant=password] spectric-button{position:absolute;right:4px;bottom:3px}spectric-input .checkbox{display:flex;justify-self:center}spectric-input spectric-colorpicker{display: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:-18px 0 0;position:fixed;top:anchor(bottom);justify-self:anchor-center;text-align:center}spectric-query .autocomplete .optiontype{float:left;max-width:10px}spectric-query .autocomplete .label{position:absolute;right:0}spectric-query .autocomplete .option.active,spectric-query .autocomplete .option:hover{background-color:var(--spectric-background-hover, rgba(141, 141, 141, .12));border-bottom:1px solid var(--primary, #1ea7fd)}spectric-query .autocomplete .option{border-bottom:1px solid transparent;padding:8px}.query-bar-date-quick-select{display:flex;justify-content:space-evenly}spectric-pagination .spectric-pagination-container{display:flex;justify-content:space-between;align-items:center}spectric-pagination .spectric-pagination-text{flex-grow:1;text-align:center}spectric-table{display:flex;flex-direction:column;overflow:hidden;line-height:1}spectric-table .table-wrapper{overflow:auto;flex-grow:1;position:relative}spectric-table tr{text-align:center}spectric-table tr.odd{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 90%)}spectric-table spectric-table-virtual-body tr:hover{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 70%)}spectric-table tr{height:var(--rowHeight)}spectric-table td{height:var(--rowHeight);padding:1px;border:1px solid transparent}spectric-table div[role=table]{display:table;min-width:100%}spectric-table-cell{display:contents;vertical-align:middle}spectric-table-cell td{position:relative}spectric-table td:hover:has(.filterable){border:1px solid var(--spectric-primary, #1ea7fd)}spectric-table-cell .table-cell-actions{position:absolute;display:flex;width:100%;flex-direction:row-reverse;visibility:hidden;top:-10px;z-index:1}spectric-table-cell td:hover .table-cell-actions{visibility:unset}spectric-table .table-checkbox-single spectric-button{--button-border-radius: 50%}spectric-input.table-checkbox-single[checked] spectric-button{--text-on-color: transparent;border-radius:50%;position:relative}spectric-input.table-checkbox-single[checked] spectric-button:before{position:absolute;content:" ";height:50%;width:50%;left:25%;top:25%;border-radius:50%;z-index:1;box-shadow:0 0 0 4px var(--input-color)}spectric-table .cell-contents{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lineClamp,1);-webkit-box-pack:center;overflow:hidden;text-overflow:ellipsis;font-size:var(--fontSize);height:calc(var(--lineClamp) * var(--fontSize))}spectric-table-header{display:table-header-group;font-weight:700;position:sticky;top:0;left:0;z-index:1;background:var(--spectric-background, #ffffff)}spectric-table-header td{vertical-align:middle;position:relative}spectric-table-header .header-contents{position:relative}spectric-table-header .header-contents .sort-direction{position:absolute;right:2px;top:calc(50% - 8px)}spectric-table-header .header-contents.sortable{cursor:pointer;padding-right:15px}spectric-table-header .header-contents.resizing{-webkit-user-select:none;user-select:none}spectric-table-header .header-contents.sortable:hover .sort-direction.none:before{content:"⮁"}spectric-table-header td .header-resize-handle{width:2px;position:absolute;right:-1px;top:1px;visibility:hidden;background-color:var(--spectric-primary, #1ea7fd);height:100%;cursor:ew-resize;z-index:1}spectric-table-header td:hover .header-resize-handle{visibility:visible}spectric-table-header td:hover:has(*.header-resize-handle){border-bottom:1px solid var(--spectric-primary, #1ea7fd)}spectric-table-body{display:table-row-group}spectric-table-virtual-body{display:contents}spectric-table-virtual-body .virtual-scroll-spacer td{padding:0;border:0px}.spectric-popover-portal{position:fixed;z-index:9999;--spectric-tooltip-background-color: var(--spectric-tooltip-background, #000000);--spectric-tooltip-text-color: var(--spectric-tooltip-text, var(--spectric-text-primary, white));--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%)}.color-picker-footer{display:flex;justify-content:space-evenly}

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './debounce';
+export * from './once';
+export * from './spread';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spectric/ui",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "type": "module",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",
@@ -13,14 +13,18 @@
   "scripts": {
     "build": "tsc && vite build",
     "start": "storybook dev -p 6006",
+    "test-setup": "storybook dev -p 6006 --no-open --ci --loglevel verbose",
     "storybook:build": "web-component-analyzer src --outFiles .storybook/build/custom-elements.json && storybook build --output-dir public",
-    "release": "npm version patch && git push --follow-tags"
+    "release": "npm version patch && git push --follow-tags",
+    "test": "playwright test --reporter=list --timeout 90000",
+    "type-check": "tsc --noemit"
   },
   "dependencies": {
     "lit": "^3.2.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
+    "@playwright/test": "^1.55.0",
     "@storybook/addon-essentials": "^8.4.6",
     "@storybook/blocks": "^8.4.6",
     "@storybook/client-api": "^7.6.17",

package/src/classes/DisposibleElement.ts

@@ -5,6 +5,9 @@ export interface IDisposable {
 }
 type DisposableTarget = HTMLElement | Promise<HTMLElement> | (() => HTMLElement)
 let listeners = 0;
+export const getListeners = () => {
+    return listeners
+}
 class DomListener implements IDisposable {
 
     private _handler?: (e: any) => void;

package/src/classes/index.ts

@@ -0,0 +1,2 @@
+export * from "./BitArray"
+export * from "./DisposibleElement"

package/src/components/color_picker/ColorPicker.css

@@ -0,0 +1,4 @@
+.color-picker-footer{
+    display: flex;
+    justify-content: space-evenly;
+}

package/src/components/color_picker/ColorPicker.ts

@@ -0,0 +1,244 @@
+import { html, LitElement, PropertyValues, TemplateResult } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import { PopoverElement } from '../tooltip/popover';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { DomEvent, } from '../table';
+import { SpectricInput } from '../input';
+import "./ColorPicker.css"
+export interface ColorPickerProps {
+    /**Color in hex*/
+    value?: string,
+    showAlpha?: boolean
+}
+
+@customElement('spectric-colorpicker')
+export class SpectricColorPicker extends LitElement implements ColorPickerProps {
+    @property({ type: String, reflect: true })
+    value = "#FF0000FF"
+    @property({ type: Boolean, reflect: true })
+    showAlpha = true
+    @state()
+    private hue: number = 0;
+    @state()
+    private alpha: number = 1;
+    @state()
+    private saturation: number = 1;
+    @state()
+    private lightness: number = 1;
+    private canvas = createRef<HTMLCanvasElement>()
+    private original?: string;
+    /**is mouse down on saturation/light canvas? */
+    private sldown: boolean = false;
+
+    protected createRenderRoot(): HTMLElement | DocumentFragment {
+        return this
+    }
+
+    protected update(changedProperties: PropertyValues): void {
+        if (changedProperties.has("value")) {
+            let { h, s, l, a } = hexToHsl(this.value)
+            this.hue = h
+            this.saturation = s;
+            this.lightness = l;
+            this.alpha = a
+            this.renderHueSaturationGrid()
+        }
+        super.update(changedProperties)
+    }
+    private renderHueSaturationGrid() {
+        console.log("canvas render")
+        if (!this.canvas.value) {
+            return
+        }
+        let canvas: HTMLCanvasElement = this.canvas.value;
+        let ctx = canvas.getContext("2d");
+        if (!ctx) {
+            return
+        }
+        let xpix = this.canvas.value.width / 100
+        let ypix = this.canvas.value.height / 100
+        let x = 0,
+            y = 0; //pixel size
+        for (let m of hslGen(this.hue)) {
+            ctx.fillStyle = m;
+            ctx.fillRect(x, y, xpix, ypix); //Need to made this a 2d saturation, light graph
+            x += xpix;
+            x = x % (xpix * 101);
+            if (!x)
+                y += ypix;
+        }
+    }
+    _handleSaturationLightnessClick = (e: PointerEvent) => {
+        if (!this.canvas.value) {
+            return
+        }
+        let { offsetX, offsetY } = e
+        this.saturation = offsetX / this.canvas.value.width
+        this.lightness = (this.canvas.value.height - offsetY) / this.canvas.value.height
+        this.updateValue()
+    }
+    _handleHueChange = (e: DomEvent<SpectricInput>) => {
+        this.hue = (parseInt(String(e.target.value)) / 100) * 360
+        e.target.style.setProperty("accent-color", `hsl(${this.hue}deg 100% 50%)`)
+        this.renderHueSaturationGrid()
+        this.updateValue()
+    }
+    private updateValue() {
+        this.value = hslToHex(this.hue, this.saturation * 100, this.lightness * 100) + (Math.round(this.alpha * 255).toString(16).padStart(2, "0"))
+    }
+    _handleAlphaChange = (e: DomEvent<SpectricInput>) => {
+        this.alpha = parseInt(String(e.target.value)) / 100
+        console.log(this.alpha, e)
+        this.updateValue()
+    }
+    _handleApply = () => {
+        console.log(this.hue, this.saturation, this.lightness, this.alpha)
+        this.updateValue()
+        console.log(this.value)
+        this.querySelector<PopoverElement>("spectric-popover")?.hidePopover()
+    }
+    _cancel = () => {
+        if (this.original) {
+            this.value = this.original
+        }
+        this.querySelector<PopoverElement>("spectric-popover")?.hidePopover()
+    }
+    _openPopover = async () => {
+        this.original = this.value
+        this.querySelector<PopoverElement>("spectric-popover")?.showPopover()
+        while (!this.canvas.value) {
+            await new Promise(resolve => setTimeout(resolve, 100))
+        }
+        this.renderHueSaturationGrid()
+    }
+    protected getPopover(): TemplateResult {
+        return html`
+                <spectric-input label="Hue" class="hue-gradient" variant="range" .value=${this.hue || 0} style="accent-color:hsl(${this.hue}deg 100% 50%)" @change=${this._handleHueChange}></spectric-input>
+                <canvas ${ref(this.canvas)} width=200 height=100 class="saturation-lightness-grid" @click=${this._handleSaturationLightnessClick}
+                 @mousedown=${() => { this.sldown = true }} 
+                 @mouseup=${() => this.sldown = false}
+                 @mousemove=${(e: PointerEvent) => { if (this.sldown) { this._handleSaturationLightnessClick(e) } }}
+                 ></canvas>
+                <spectric-input class="alpha-gradient" ?hidden=${!this.showAlpha} label="Opacity" variant="range" .value=${(this.alpha || 1) * 100} @change=${this._handleAlphaChange}></spectric-input>
+                <div class="color-picker-footer">
+                    <spectric-button @click=${this._handleApply}>Apply</spectric-button>
+                    <spectric-button variant="secondary" @click=${this._cancel}>Cancel</spectric-button>
+                </div>
+            `
+    }
+
+    protected render(): unknown {
+        return html`
+        <spectric-button variant="text" @click=${this._openPopover}>
+            <spectric-popover .text=${this.getPopover()} icon variant="text"></spectric-popover>
+            <div style="width:15px;height:15px;background-color:${this.value}"></div>
+        </spectric-button>
+    `;
+    }
+}
+
+function* hslGen(hue: number) {
+    for (let l = 100; l >= 0; l--) {
+        for (let s = 0; s <= 100; s++) {
+            yield `hsl(${hue}, ${s}%, ${l}%)`;
+        }
+    }
+}
+function hslToHex(h: number, s: number, l: number) {
+    l /= 100;
+    const a = s * Math.min(l, 1 - l) / 100;
+    const f = (n: number) => {
+        const k = (n + h / 30) % 12;
+        const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+        return Math.round(255 * color).toString(16).padStart(2, '0');   // convert to Hex and prefix "0" if needed
+    };
+    return `#${f(0)}${f(8)}${f(4)}`;
+}
+function hexToHsl(hex: string) {
+    // Convert hex to RGB
+    let r = 0, g = 0, b = 0, a = 255;
+    if (hex.length === 4 || hex.length === 5) { // Handle shorthand hex codes like #F0C
+        r = parseInt(hex[1] + hex[1], 16);
+        g = parseInt(hex[2] + hex[2], 16);
+        b = parseInt(hex[3] + hex[3], 16);
+        if (hex.length === 5) {
+            a = parseInt(hex[4] + hex[4], 16);
+        }
+    } else if (hex.length === 7 || hex.length === 9) { // Handle full hex codes like #FF00CC
+        r = parseInt(hex.substring(1, 3), 16);
+        g = parseInt(hex.substring(3, 5), 16);
+        b = parseInt(hex.substring(5, 7), 16);
+        if (hex.length === 9) {
+            a = parseInt(hex.substring(7, 9), 16);
+        }
+    }
+
+    // Normalize RGB values to a range of 0-1
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    a /= 255
+    // Find min and max values among R, G, B
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+
+    let h = 0, s = 0, l = (max + min) / 2;
+
+    if (max === min) {
+        // Achromatic (grayscale)
+        h = 0;
+        s = 0;
+    } else {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+
+    // Convert Hue to  degrees
+    h = Math.round(h * 360);
+
+    //leave sla as 0-1
+    return { h, s, l, a };
+}
+export interface ColorPickerEventMap {
+    'change': (event: CustomEvent<ColorPickerProps>) => void
+}
+
+declare global {
+
+    interface HTMLElementTagNameMap {
+        "spectric-colorpicker": HTMLElementTagWithEvents<SpectricColorPicker, ColorPickerEventMap>
+    }
+
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * {@link SpectricColorPicker}
+             */
+            "spectric-colorpicker": ReactElementWithPropsAndEvents<SpectricColorPicker, ColorPickerProps, ColorPickerEventMap>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * {@link SpectricColorPicker}
+                 */
+                "spectric-colorpicker": ReactElementWithPropsAndEvents<SpectricColorPicker, ColorPickerProps, ColorPickerEventMap>;
+            }
+        }
+    }
+}

package/src/components/color_picker/index.ts

@@ -0,0 +1 @@
+import "./ColorPicker"

package/src/components/index.ts

@@ -10,4 +10,6 @@ export * from "./dialog"
 export * from "./splitview"
 export * from "./pagination"
 export * from "./table"
-export * from "./tooltip"
+export * from "./tooltip"
+export * from "./types"
+export * from "./color_picker"

package/src/components/input.css

@@ -14,7 +14,39 @@ spectric-input {
 spectric-input .inputWrapper {
     color: var(--text-secondary)
 }
+spectric-input.hue-gradient input[type="range"]::-webkit-slider-runnable-track {
+    background: linear-gradient(
+    to right,
+    hsl(0, 100%, 50%),   /* Red */
+    hsl(60, 100%, 50%),  /* Yellow */
+    hsl(120, 100%, 50%), /* Green */
+    hsl(180, 100%, 50%), /* Cyan */
+    hsl(240, 100%, 50%), /* Blue */
+    hsl(300, 100%, 50%), /* Magenta */
+    hsl(360, 100%, 50%)  /* Red (completes the circle) */
+  )
+}
 
+.saturation-lightness-grid {
+  /* Assuming a fixed hue, e.g., 240 (blue) */
+  background: linear-gradient(to right,
+    hsl(var(--accent-color), 0%, 50%), /* From desaturated */
+    hsl(var(--accent-color), 100%, 50%) /* To fully saturated */
+  ),
+  linear-gradient(to top,
+    hsl(var(--accent-color), 100%, 0%), /* From dark */
+    hsl(var(--accent-color), 100%, 50%), /* To mid-lightness */
+    hsl(var(--accent-color), 100%, 100%) /* To bright */
+  );
+}
+spectric-input.alpha-gradient input[type="range"]::-webkit-slider-runnable-track {
+  background-image:
+    /* Alpha gradient from transparent to opaque */
+    linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+}
+spectric-input.alpha-gradient input[type="range"],spectric-input.hue-gradient input[type="range"]{  -webkit-appearance: none; /* For WebKit browsers (Chrome, Safari) */
+  -moz-appearance: none;    /* For Mozilla Firefox */
+  appearance: none;         /* Standard property */}
 spectric-input .inputWrapper input {
     box-sizing: border-box;
     margin: 0px;
@@ -67,7 +99,9 @@ spectric-input .inputContainer::after {
 spectric-input #helper-text {
     height: 18px;
 }
-
+spectric-input #helper-text.hidden {
+    display: none;
+}
 spectric-input[variant="password"] spectric-button {
     position: absolute;
     right: 4px;
@@ -77,4 +111,7 @@ spectric-input[variant="password"] spectric-button {
 spectric-input .checkbox{
     display: flex;
     justify-self: center;
+}
+spectric-input spectric-colorpicker{
+    display: block;
 }

package/src/components/input.ts

@@ -1,9 +1,11 @@
 import { html, LitElement, PropertyValues, TemplateResult } from 'lit';
 import "./input.css"
-import { customElement, property, query } from 'lit/decorators.js';
+import { customElement, eventOptions, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { ReactElementWithPropsAndEvents } from './types';
 import { ButtonSizesTypes } from './Button';
+import { DomEvent } from './table';
+import { SpectricColorPicker } from './color_picker/ColorPicker';
 
 export enum InputVariants {
   Text = 'text',
@@ -17,7 +19,8 @@ export enum InputVariants {
   file = "file",//display drop area
   hidden = "hidden",//display drop area
   password = "password",
-  checkbox = "checkbox"
+  checkbox = "checkbox",
+  range = "range"
 
 }
 type InputVariantsTypes = `${InputVariants}`
@@ -232,6 +235,11 @@ export class SpectricInput extends LitElement implements InputProps {
       this.dispatchEvent(new Event("change", { bubbles: true }))
     }
   }
+  @eventOptions({ capture: true })
+  _handleChange(e: Event) {
+    e.stopPropagation()
+    this.dispatchEvent(new Event("change", { bubbles: true }))
+  }
   protected render(): unknown {
     switch (this.variant) {
       case InputVariants.Text:
@@ -243,7 +251,7 @@ export class SpectricInput extends LitElement implements InputProps {
       case InputVariants.date://replace with custom date picker 
       case InputVariants.datetime://replace with custom date picker 
       case InputVariants.file://replace with drag and drop location and custom select file button
-      case InputVariants.color: //replace with custom color picker
+      case InputVariants.range:
         return html`
             <div class="inputWrapper">
                 <div class="text-input__label-helper-wrapper">
@@ -271,9 +279,7 @@ export class SpectricInput extends LitElement implements InputProps {
                     .value="${this._value as string}"
                     maxlength="${ifNonEmpty(this.maxCount > 0 ? this.maxCount : undefined)}"
                     @input="${this._handleInput}" 
-                    @change=${() => {
-            this.dispatchEvent(new Event("change", { bubbles: true }))
-          }}
+                    @change=${this._handleChange}
                     />
                     
                   ${this.variant === String(InputVariants.password) && this.showPasswordVisibilityToggle
@@ -290,6 +296,7 @@ export class SpectricInput extends LitElement implements InputProps {
                 </div>
                 <div
                     id="helper-text"
+                    class="${this.helperText || this.invalid ? "" : "hidden"}"
                     >
                     <slot name="helper-text"> ${this.invalid ? this.invalidText : this.helperText} </slot>
                     </div>
@@ -298,8 +305,28 @@ export class SpectricInput extends LitElement implements InputProps {
             </div>
           `;
 
+      case InputVariants.color: //replace with custom color picker
+        return html`<div class="inputWrapper">
+                <div class="text-input__label-helper-wrapper">
+                    <div class="--text-input__label-wrapper">
+                        ${this.label} ${this.maxCount > 0 && this._value ? `${(this._value as String).length}/${this.maxCount}` : null}
+                    </div> 
+                </div>
+              <div class="fieldwrapper">
+                <div ?data-invalid="${this.invalid}" class="inputContainer">
+                  <spectric-colorpicker @change=${(e: DomEvent<SpectricColorPicker>) => { this.value = e.target.value; this._handleChange(e) }}></spectric-colorpicker>
+                </div>
+                <div
+                    id="helper-text"
+                    class="${this.helperText || this.invalid ? "" : "hidden"}"
+                    >
+                    <slot name="helper-text"> ${this.invalid ? this.invalidText : this.helperText} </slot>
+                  </div>
+
+              </div>
+            </div>`
       case InputVariants.hidden:
-        return html`<input type="hidden"></input>`
+        return html`<input type="hidden"/>`
 
       case InputVariants.checkbox:
 

package/src/components/table/__tests__/table.spec.ts

@@ -0,0 +1,91 @@
+import { test, expect } from '@playwright/test';
+import type { SpectricTableElement, TableEvents } from '../index';
+import type SpectricModule from "../../../index.ts"
+test.beforeEach(async ({ page }) => {
+  await page.addInitScript(() => {
+    //@ts-ignore
+    window.awaitEvent = function awaitEvent(target, event, trigger) {
+      return new Promise((resolve, reject) => {
+        const handleEvent = (...args) => {
+          //@ts-ignore
+          target.removeEventListener(event, this)
+          resolve(args)
+        }
+        //@ts-ignore
+        target.addEventListener(event, handleEvent)
+        trigger()
+      })
+    }
+  })
+  await page.goto('http://localhost:6006/iframe.html?globals=&args=&id=spectric-ui-components-ui-table--milti-select&viewMode=story');
+});
+test.describe("Spectric Table Tests", () => {
+
+  test('MultiSelect Table Select All/Deselect All ', async ({ page }) => {
+    let tableLocator = page.locator("spectric-table")
+    tableLocator.waitFor()
+    var selected = await tableLocator.evaluate<number, SpectricTableElement>(
+      async (table) => {
+        console.log("here")
+        let selectAll = table.querySelectorAll<HTMLElement>("spectric-table-header spectric-input[variant='checkbox'] spectric-button")[0]
+        let [event] = await window.awaitEvent<TableEvents>(table, "selected", () => selectAll.click()) as Parameters<TableEvents["selected"]>
+        return event.detail.length
+      }
+    )
+    await expect(selected, "All Selected").toBeGreaterThan(0)
+
+    selected = await tableLocator.evaluate<number, SpectricTableElement>(
+      async (table) => {
+        let selectAll = table.querySelectorAll<HTMLElement>("spectric-table-header spectric-input[variant='checkbox'] spectric-button")[0]
+        let [event] = await window.awaitEvent<TableEvents>(table, "selected", () => selectAll.click()) as Parameters<TableEvents["selected"]>
+        return event.detail.length
+      }
+    )
+    await expect(selected, "None Selected").toBe(0)
+
+    selected = await tableLocator.evaluate<number, SpectricTableElement>(
+      async (table) => {
+        let selectAll = table.querySelectorAll<HTMLElement>("spectric-table-virtual-body spectric-input[variant='checkbox'] spectric-button")[2]
+        let [event] = await window.awaitEvent<TableEvents>(table, "selected", () => selectAll.click()) as Parameters<TableEvents["selected"]>
+        return event.detail.length
+      }
+    )
+    await expect(selected, "One Selected").toBe(1)
+
+    selected = await tableLocator.evaluate<number, SpectricTableElement>(
+      async (table) => {
+        let selectAll = table.querySelectorAll<HTMLElement>("spectric-table-virtual-body spectric-input[variant='checkbox'] spectric-button")[2]
+        let [event] = await window.awaitEvent<TableEvents>(table, "selected", () => selectAll.click()) as Parameters<TableEvents["selected"]>
+        return event.detail.length
+      }
+    )
+    await expect(selected, "One DeSelected").toBe(0)
+  });
+
+
+  test('Ensure all event listeners are cleaned up and not leaked', async ({ page }) => {
+    let tableLocator = page.locator("spectric-table")
+    await tableLocator.waitFor()
+    let listenerCount = await page.evaluate(async () => {
+      const module = await import("./src/index.ts") as typeof SpectricModule
+      return module.getListeners()
+    })
+    await expect(listenerCount).toBeGreaterThan(0)
+    //Delete all content and expect everything to get cleaned up
+    listenerCount = await page.evaluate(async () => {
+      const module = await import("./src/index.ts") as typeof SpectricModule
+      document.body.innerHTML = ""
+      return module.getListeners()
+    })
+    await expect(listenerCount).toBe(0)
+
+  })
+})
+
+
+
+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/table/body.ts

@@ -3,7 +3,7 @@ import { customElement, property, } from 'lit/decorators.js';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 export const TableBodyElementTag = "spectric-table-body"
 import "./cell"
-import { ColumnSettings, TableElement } from './table';
+import { ColumnSettings, SpectricTableElement } from './table';
 import { repeat } from 'lit/directives/repeat.js';
 
 interface BodyProps<T> {
@@ -21,7 +21,7 @@ export class TableBodyElement<T> extends LitElement implements BodyProps<T> {
     data: T[] = [];
     @property({ type: Array, attribute: false })
     columns: ColumnSettings<T>[] = [];
-    table!: TableElement<T>
+    table!: SpectricTableElement<T>
     protected createRenderRoot(): HTMLElement | DocumentFragment {
         return this
     }