@spectric/ui 0.0.16 → 0.0.18

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;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:1;overflow:hidden;text-overflow:ellipsis}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 .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-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:-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, var(--spectric-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%)}spectric-input.hue-gradient input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}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}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% }

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.16",
+  "version": "0.0.18",
   "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/Button.ts

@@ -93,7 +93,7 @@ export class SpectricButton extends DisposableElement implements ButtonProps {
   protected render(): unknown {
     const mode = MODES[this.variant] || 'spectric-button--primary';
     return html`
-    ${this.tooltip ? html`<spectric-tooltip .text=${this.tooltip} .position=${this.tooltipPosition || "right"} .triggerTarget=${this}></spectric-tooltip>` : null}
+    ${this.tooltip && this.tooltip !== "" ? html`<spectric-tooltip .text=${this.tooltip} .position=${this.tooltipPosition || "right"} .triggerTarget=${this}></spectric-tooltip>` : null}
       <button
         type="button"
         ?disabled=${this.disabled}

package/src/components/ThemeProvider.ts

@@ -65,7 +65,40 @@ type ThemeProps = {
     theme?: KnownThemes
 }
 
-
+export const SPECTRIC_CSS_VARIABLES = ["--spectric-background",
+    "--spectric-background-hover",
+    "--spectric-background-inverse",
+    "--spectric-background-inverse-hover",
+    "--spectric-border-radius",
+    "--spectric-primary",
+    "--spectric-secondary",
+    "--spectric-tertiary",
+    "--spectric-disabled",
+    "--panel-color",
+    "--panel-color-inverse",
+    "--spectric-border-disabled",
+    "--spectric-input-color",
+    "--spectric-input-bottom",
+    "--spectric-text-on-color",
+    "--spectric-text-on-color-disabled",
+    "--spectric-text-placeholder",
+    "--spectric-text-primary",
+    "--spectric-text-secondary",
+    "--spectric-button-separator",
+    "--spectric-button-primary",
+    "--spectric-button-secondary",
+    "--spectric-button-tertiary",
+    "--spectric-button-danger-primary",
+    "--spectric-button-danger-secondary",
+    "--spectric-button-danger-active",
+    "--spectric-button-primary-active",
+    "--spectric-button-secondary-active",
+    "--spectric-button-tertiary-active",
+    "--spectric-button-danger-hover",
+    "--spectric-button-primary-hover",
+    "--spectric-button-secondary-hover",
+    "--spectric-button-tertiary-hover",
+    "--spectric-text-on-color-disabled"]
 const theme = `
     --spectric-background: var(--background,#ffffff);
     --spectric-background-hover:var(--background-hover,rgba(141, 141, 141, 0.12));

package/src/components/button.css.ts

@@ -116,8 +116,8 @@ export default css`
     height: 10px;
 }
 :host([icon][size="xxsmall"]) .spectric-button{
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
 }
 :host([icon][size="xsmall"]) .spectric-button{
     width: 28px;

package/src/components/color_picker/ColorPicker.css

@@ -0,0 +1,40 @@
+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) */
+  )
+}
+
+spectric-input.alpha-gradient input[type="range"]::-webkit-slider-runnable-track {
+    background:
+    /* Alpha gradient from transparent to opaque */
+    linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%),
+    /* Checkerboard */
+    repeating-conic-gradient(
+    #fff 0% 25%, /* White for the first quarter */
+    #000 25% 50%, /* Black for the second quarter */
+    #fff 50% 75%, /* White for the third quarter */
+    #000 75% 100% /* Black for the fourth quarter */
+  ) 50% / 10px 10px;
+    
+}
+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 */}
+
+.color-picker-footer{
+    display: flex;
+    justify-content: space-evenly;
+}
+.color-picker-saturation-lightness-grid{
+    cursor: crosshair;
+}
+.color-picker-eyedropper{
+    --button-border-radius:50%
+}

package/src/components/color_picker/ColorPicker.ts

@@ -0,0 +1,268 @@
+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
+}
+
+//Not all browsers support eyedropper
+interface EyeDropper {
+    new(): EyeDropper;
+
+    /**
+     * Opens the eyedropper mode, allowing the user to select a color from the screen.
+     * Returns a Promise that resolves with an object containing the selected color in sRGB hexadecimal format.
+     * The Promise rejects if the user cancels the eyedropper mode (e.g., by pressing Escape).
+     */
+    open(): Promise<{ sRGBHex: string }>;
+}
+
+declare var EyeDropper: EyeDropper;
+let eyedropper: EyeDropper | undefined
+// if (window.hasOwnProperty("EyeDropper")) {
+//     eyedropper = new EyeDropper()
+// }
+@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() {
+        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
+        this.updateValue()
+    }
+    _handleApply = () => {
+        this.updateValue()
+        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="color-picker-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 ?hidden=${eyedropper === undefined} icon class="color-picker-eyedropper" @click=${async () => {
+                if (eyedropper) {
+                    let result = await eyedropper?.open()
+                    let { h, s, l, a } = hexToHsl(result.sRGBHex);
+                    this.hue = h
+                    this.saturation = s
+                    this.lightness = l
+                    this.alpha = a
+                    this.updateValue()
+                }
+            }}>${eyedropper_icon}</spectric-button>
+                    <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} icon>
+            <spectric-popover .text=${this.getPopover()} icon variant="text"></spectric-popover>
+            <div style="width:15px;height:15px;background-color:${this.value}"></div>
+        </spectric-button>
+    `;
+    }
+}
+const eyedropper_icon = html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" height="15" width="15" fill="currentColor"><path d="M222,67.34a33.81,33.81,0,0,0-10.64-24.25C198.12,30.56,176.68,31,163.54,44.18L142.82,65l-.63-.63a22,22,0,0,0-31.11,0l-9,9a14,14,0,0,0,0,19.81l3.47,3.47L53.14,149.1a37.79,37.79,0,0,0-9.84,36.73l-8.31,19a11.68,11.68,0,0,0,2.46,13A13.91,13.91,0,0,0,47.32,222,14.15,14.15,0,0,0,53,220.82L71,212.92a37.92,37.92,0,0,0,35.84-10.07l52.44-52.46,3.47,3.48a14,14,0,0,0,19.8,0l9-9a22,22,0,0,0,0-31.12l-.66-.66L212,91.85A33.76,33.76,0,0,0,222,67.34Zm-123.61,127a26,26,0,0,1-26,6.47,6,6,0,0,0-4.16.24l-20,8.75a2,2,0,0,1-2.09-.31l9.12-20.9a5.94,5.94,0,0,0,.19-4.31,25.88,25.88,0,0,1,6.26-26.72l52.44-52.45,36.76,36.78Zm105.16-111L178.17,108.9a6,6,0,0,0,0,8.47l4.88,4.89a10,10,0,0,1,0,14.15l-9,9a2,2,0,0,1-2.82,0l-60.69-60.7a2,2,0,0,1,0-2.83l9-9a10,10,0,0,1,14.14,0l4.89,4.89a6,6,0,0,0,4.24,1.75h0a6,6,0,0,0,4.25-1.77L172,52.66c8.58-8.58,22.52-9,31.08-.85a22,22,0,0,1,.44,31.57Z"/></svg>`
+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,6 @@ spectric-input {
 spectric-input .inputWrapper {
     color: var(--text-secondary)
 }
-
 spectric-input .inputWrapper input {
     box-sizing: border-box;
     margin: 0px;
@@ -67,7 +66,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 +78,11 @@ spectric-input[variant="password"] spectric-button {
 spectric-input .checkbox{
     display: flex;
     justify-self: center;
+}
+spectric-input spectric-colorpicker{
+    display: block;
+}
+
+spectric-input[variant="color"] .fieldwrapper{
+  display: inline-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,18 +305,40 @@ 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:
 
         return html`
         <div class="checkbox">
-        <spectric-button @click=${() => {
+        <spectric-button 
+        .tooltip=${this.helperText}
+        @click=${() => {
             this.checked = !this.checked;
             this.value = Boolean(this.checked);
           }} icon size=${this.size || "xxsmall"} variant=${this.checked ? "primary" : "secondary"}>${this.checked ? '✓' : "\u00A0"}</spectric-button>
-          ${this.invalid || this.helperText ? html`<spectric-tooltip text=${this.invalid || this.helperText}></spectric-tooltip>` : null}
+          
           ${this.label}
         </div>
         </label>

package/src/components/pagination/pagination.ts

@@ -18,7 +18,6 @@ interface PaginationProps extends PaginationChangeProps {
     pageSizeOptions?: number[]
 }
 
-console.log("Pagination")
 
 /**
  * Pagination Element
@@ -47,7 +46,7 @@ export class PaginationElement extends LitElement implements PaginationProps {
     protected createRenderRoot(): HTMLElement | DocumentFragment {
         return this
     }
-    protected updated(_changedProperties: PropertyValues): void {
+    protected update(_changedProperties: PropertyValues): void {
         if (_changedProperties.has("pageSize") && !this.pageSizeOptions.includes(this.pageSize)) {
             this.pageSizeOptions = [...this.pageSizeOptions, this.pageSize].sort((a, b) => a - b)
             /**
@@ -60,6 +59,7 @@ export class PaginationElement extends LitElement implements PaginationProps {
                 }
             })
         }
+        super.update(_changedProperties)
     }
     private _handlePageUp = () => {
         this.page += 1