@spectric/ui 0.0.18 → 0.0.20

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[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% }
+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}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-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{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.18",
+  "version": "0.0.20",
   "type": "module",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",

package/src/components/Button.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, html } from 'lit';
+import { CSSResultGroup, html, PropertyValues, render } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import style from './button.css';
@@ -70,30 +70,31 @@ export class SpectricButton extends DisposableElement implements ButtonProps {
   constructor() {
     super()
     this.addDisposableListener(this, "click", this._onClick, { capture: true })
+    this._onClick = this._onClick.bind(this)
   }
 
-  private _onClick = (e: MouseEvent) => {
+  //@eventOptions({ capture: true })
+  private _onClick(e: MouseEvent) {
     if (e instanceof CustomEvent) {
       return
     }
-    e.preventDefault()
-    e.stopImmediatePropagation()
-    e.stopPropagation()
     if (this.disabled) {
+      e.preventDefault()
+      e.stopImmediatePropagation()
+      e.stopPropagation()
       return
     }
-    const options: CustomEventInit = {
-      bubbles: true,
-      composed: true,
-      detail: e
-    };
-    this.dispatchEvent(new CustomEvent<MouseEvent>('click', options));
-  }
 
+  }
+  protected updated(_changedProperties: PropertyValues): void {
+    if (this.tooltip && this.tooltip !== "") {
+      render(html`<spectric-tooltip slot="tooltip" .text=${this.tooltip} .position=${this.tooltipPosition || "right"}></spectric-tooltip>`, this)
+    }
+  }
   protected render(): unknown {
     const mode = MODES[this.variant] || 'spectric-button--primary';
     return html`
-    ${this.tooltip && this.tooltip !== "" ? html`<spectric-tooltip .text=${this.tooltip} .position=${this.tooltipPosition || "right"} .triggerTarget=${this}></spectric-tooltip>` : null}
+      <slot name="tooltip"></slot>
       <button
         type="button"
         ?disabled=${this.disabled}

package/src/components/Panel.ts

@@ -1,7 +1,8 @@
-import { CSSResultGroup, html, LitElement } from 'lit';
+import { CSSResultGroup, html, PropertyValues } from 'lit';
 import styles from './panel.css.ts';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
+import { DisposableElement } from '../classes/DisposibleElement.ts';
 
 
 
@@ -10,7 +11,7 @@ import { property } from 'lit/decorators/property.js';
  * Spectric Panel visually seperates content areas and automatically adjusts the component colors that are nested inside.
  *  */
 @customElement("spectric-panel")
-export class SpectricPanel extends LitElement {
+export class SpectricPanel extends DisposableElement {
   static styles?: CSSResultGroup | undefined = styles;
 
   /**
@@ -21,23 +22,17 @@ export class SpectricPanel extends LitElement {
 
   @property({ attribute: false })
   layers?: NodeListOf<SpectricPanel>;
-
-  updated() {
-    if (!this.layers) {
-      this.layers = this.querySelectorAll(
-        "spectric-panel"
-      );
-    }
-
-    this.layers.forEach((item: SpectricPanel) => {
-      (item).setAttribute(
-        'level',
-        ((this.level + 1) % 4).toString()
-      );
-    });
-
+  constructor() {
+    super()
+    //@ts-ignore FIXME, make DisposableElement generic and add event map to DisposableElement so it knows about the events and the eveent handlers
+    this.addDisposableListener(this, "layer-add", () => {
+      this.layers = this.querySelectorAll("spectric-panel")
+    }, { capture: true })
+  }
+  connectedCallback(): void {
+    super.connectedCallback()
     this.dispatchEvent(
-      new CustomEvent("use-layer", {
+      new CustomEvent("layer-add", {
         bubbles: true,
         cancelable: true,
         composed: true,
@@ -48,6 +43,18 @@ export class SpectricPanel extends LitElement {
       })
     );
   }
+  update(changed: PropertyValues) {
+    this.layers = this.querySelectorAll(
+      "spectric-panel"
+    );
+    this.layers.forEach((item: SpectricPanel) => {
+      (item).setAttribute(
+        'level',
+        ((this.level + 1) % 4).toString()
+      );
+    });
+    super.update(changed)
+  }
 
   render() {
     return html` <slot></slot> `;

package/src/components/button.css.ts

@@ -114,27 +114,40 @@ export default css`
 :host([icon][size="tiny"]) .spectric-button{
     width: 10px;
     height: 10px;
+    font-size:8px;
+    line-height:8px
 }
 :host([icon][size="xxsmall"]) .spectric-button{
     width: 16px;
     height: 16px;
+    font-size: 10px;
+    line-height: 10px;
 }
 :host([icon][size="xsmall"]) .spectric-button{
     width: 28px;
     height: 28px;
+    font-size: 16px;
+    line-height: 16px;
 }
 :host([icon][size="small"]) .spectric-button{
     width: 34px;
     height: 34px;
+    font-size: 20px;
+    line-height: 20px;
+
 }
 :host([icon][size="medium"]) .spectric-button{
     width: 40px;
     height: 40px;
+    font-size: 28px;
+    line-height: 28px;
 }
 
 :host([icon][size="large"]) .spectric-button{
     width: 48px;
     height: 48px;
+    line-height: 32px;
+    font-size: 32px;
 }
 
 .spectric-button:disabled{

package/src/components/calendar/calendar.css

@@ -0,0 +1,50 @@
+
+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 0.1s ease;
+      --spectric-text-on-color: var(--spectric-primary,#1ea7fd);
+    }
+
+spectric-calendar    .day {
+      font-weight: bold;
+      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/src/components/calendar/calendar.ts

@@ -0,0 +1,281 @@
+import { html, PropertyValues } from "lit";
+import { customElement, queryAsync, property, state } from "lit/decorators.js";
+import "./calendar.css";
+import { DisposableElement } from "../../classes";
+import { debounceAnimation } from "../../utils";
+import {
+  HTMLElementTagWithEvents,
+  ReactElementWithPropsAndEvents,
+} from "../types";
+import { SpectricButton } from "../Button";
+import { PopoverElement } from "../tooltip/popover";
+import { DomEvent } from "../table";
+export interface SpectricCalendarProps {
+  /**
+   * Sets the starting day for the calendar (default:Today)
+   */
+  currentDate?: Date | string | number;
+  /**
+   * Will display a button with a popup
+   */
+  popup?: boolean;
+  disabled?: boolean;
+}
+
+@customElement("spectric-calendar")
+export class SpectricCalendar extends DisposableElement {
+  @queryAsync(".days")
+  calendarElement!: Promise<HTMLDivElement>;
+
+  constructor() {
+    super();
+    this.addDisposableListener(
+      this.calendarElement,
+      "mousemove",
+      this.handleMouseMove
+    );
+    this.addDisposableListener(
+      this.calendarElement,
+      "mouseleave",
+      this.resetMouseMove
+    );
+  }
+  @property({ attribute: false })
+  currentDate?: Date | string | number = new Date();
+  @state()
+  private date: Date = new Date()
+  @property({ type: Boolean, reflect: true })
+  popup: boolean = false;
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean = false;
+  protected createRenderRoot(): HTMLElement | DocumentFragment {
+    return this;
+  }
+  private getMonthDays(year: number, month: number): (number | "")[] {
+    const date = new Date(year, month, 1);
+    const days: (number | "")[] = [];
+    const firstDay = date.getUTCDay();
+    const lastDate = new Date(year, month + 1, 0).getUTCDate();
+
+    for (let i = 0; i < firstDay; i++) {
+      days.push("");
+    }
+
+    for (let i = 1; i <= lastDate; i++) {
+      days.push(i);
+    }
+
+    return days;
+  }
+
+  private changeMonth(offset: number): void {
+    const newDate = new Date(this.date);
+    newDate.setUTCMonth(newDate.getUTCMonth() + offset);
+    this.currentDate = newDate;
+  }
+
+  private changeYear(event: Event): void {
+    const selectedYear = parseInt(
+      (event.target as HTMLSelectElement).value,
+      10
+    );
+    const newDate = new Date(this.date);
+    newDate.setUTCFullYear(selectedYear);
+    this.currentDate = newDate;
+  }
+
+  private handleMouseMove = debounceAnimation(async (e: MouseEvent) => {
+    const target = await this.calendarElement;
+    const rect = target.getBoundingClientRect();
+    const x = ((e.clientX - rect.left) / rect.width) * 100;
+    const y = ((e.clientY - rect.top) / rect.height) * 100;
+    target.style.setProperty("--x", `${x}%`);
+    target.style.setProperty("--y", `${y}%`);
+  });
+
+  private resetMouseMove = async () => {
+    const target = await this.calendarElement;
+    target.style.setProperty("--x", `200%`);
+    target.style.setProperty("--y", `200%`);
+  };
+  private selectDay(day: number) {
+    let year = this.date.getUTCFullYear();
+    let monthIndex = this.date.getUTCMonth();
+    let hours = this.date.getUTCHours()
+    let minutes = this.date.getUTCMinutes()
+    let seconds = this.date.getUTCSeconds()
+    let ms = this.date.getUTCMilliseconds()
+    let date = new Date();
+    date.setUTCFullYear(year, monthIndex, day);
+    date.setUTCHours(hours, minutes, seconds, ms);
+    console.log(date.toISOString(), year, monthIndex, day)
+    this.date = date
+    let popover = this.querySelector<PopoverElement>("spectric-popover");
+    if (popover) {
+      popover.hidePopover();
+    }
+    this.dispatchEvent(new CustomEvent("select", { detail: date }));
+  }
+  protected update(changedProperties: PropertyValues): void {
+    if (changedProperties.has("currentDate")) {
+      if (this.currentDate === undefined) {
+        this.date = new Date()
+      } else {
+        this.date = new Date(this.currentDate)
+      }
+    }
+    super.update(changedProperties)
+  }
+  render() {
+    const year = this.date.getUTCFullYear();
+    const month = this.date.getUTCMonth();
+    const day = this.date.getUTCDate()
+    this.date.toUTCString()
+    const monthName = (new Date(year, month, day)).toLocaleString("default", {
+      month: "long",
+    });
+    const days = this.getMonthDays(year, month);
+    const yearOptions = Array.from({ length: 21 }, (_, i) => year - 10 + i);
+    const calendar = html`<spectric-panel class="calendar">
+      <div class="header">
+        <spectric-button
+        ?disabled=${this.disabled}
+          size="xsmall"
+          icon
+          variant="primary"
+          @click=${() => this.changeMonth(-1)}
+          >🠈</spectric-button
+        >
+        <div class="month-year">
+          <span>${monthName}</span>
+          <select ?disabled=${this.disabled} @change=${this.changeYear}>
+            ${yearOptions.map(
+      (y) =>
+        html`<option value=${y} ?selected=${y === year}>${y}</option>`
+    )}
+          </select>
+        </div>
+        <spectric-button ?disabled=${this.disabled} size="xsmall" icon @click=${() => this.changeMonth(1)}
+          >🠊</spectric-button
+        >
+      </div>
+      <div class="days">
+        ${["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map(
+      (day) => html`<div class="day">${day}</div>`
+    )}
+        ${days.map((date) =>
+      date == ""
+        ? html`<span></span>`
+        : html`<spectric-button
+                ?disabled=${this.disabled}
+                @click=${() => this.selectDay(date)}
+                .backgroundColor=${date === day ? undefined : "var(--spectric-background,#f4f4f4)"}
+                icon
+                size="xsmall"
+                class="date ${date === day ? "active" : ""}"
+                >${date}</spectric-button
+              >`
+    )}
+      </div>
+    </spectric-panel>`;
+    if (!this.popup) {
+      return calendar;
+    }
+    return html`
+      <spectric-button
+        class="input-button-right"
+        icon
+        size="small"
+        variant="text"
+        type="button"
+        ?disabled=${this.disabled}
+        @click=${(e: DomEvent<SpectricButton>) => {
+        let popover = this.querySelector<PopoverElement>("spectric-popover");
+        if (popover && e.target) {
+          popover.triggerTarget = e.target;
+          popover.showPopover();
+        }
+      }}
+        ><svg
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          viewBox="0 0 96 96"
+          style="
+           fill: var(--button-primary, #1ea7fd);
+       "
+        >
+          <defs>
+            <rect id="vcalendar-b" width="64" height="78" x="0" y="0"></rect>
+            <filter
+              id="vcalendar-a"
+              width="110.9%"
+              height="109%"
+              x="-5.5%"
+              y="-3.2%"
+              filterUnits="objectBoundingBox"
+            >
+              <feOffset
+                dy="1"
+                in="SourceAlpha"
+                result="shadowOffsetOuter1"
+              ></feOffset>
+              <feGaussianBlur
+                in="shadowOffsetOuter1"
+                result="shadowBlurOuter1"
+                stdDeviation="1"
+              ></feGaussianBlur>
+              <feColorMatrix
+                in="shadowBlurOuter1"
+                values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"
+              ></feColorMatrix>
+            </filter>
+          </defs>
+          <g fill-rule="evenodd">
+            <path
+              d="M36,36 L36,36.9983345 C36,38.642909 37.3431458,40 39,40 C40.6684055,40 42,38.6561086 42,36.9983345 L42,36 L54,36 L54,36.9983345 C54,38.642909 55.3431458,40 57,40 C58.6684055,40 60,38.6561086 60,36.9983345 L60,36 L64.0132046,36 C65.1104814,36 66,36.8892617 66,38.0017433 L66,65.9982567 C66,67.103789 65.1101074,68 64.0132046,68 L31.9867954,68 C30.8895186,68 30,67.1107383 30,65.9982567 L30,38.0017433 C30,36.896211 30.8898926,36 31.9867954,36 L36,36 Z M64,42 L32,42 L32,66 L64,66 L64,42 Z M50,56 L50,60 L46,60 L46,56 L50,56 Z M40,56 L40,60 L36,60 L36,56 L40,56 Z M60,56 L60,60 L56,60 L56,56 L60,56 Z M40,48 L40,52 L36,52 L36,48 L40,48 Z M50,48 L50,52 L46,52 L46,48 L50,48 Z M60,48 L60,52 L56,52 L56,48 L60,48 Z M39,32 C39.5522847,32 40,32.4509752 40,32.990778 L40,37.009222 C40,37.5173285 39.6172798,37.9361019 39.1173326,37.9933343 L39,38 C38.4477153,38 38,37.5490248 38,37.009222 L38,32.990778 C38,32.4826715 38.3827202,32.0638981 38.8826674,32.0066657 L39,32 Z M57,32 C57.5522847,32 58,32.4509752 58,32.990778 L58,37.009222 C58,37.5173285 57.6172798,37.9361019 57.1173326,37.9933343 L57,38 C56.4477153,38 56,37.5490248 56,37.009222 L56,32.990778 C56,32.4826715 56.3827202,32.0638981 56.8826674,32.0066657 L57,32 Z"
+            ></path>
+          </g></svg>
+        </spectric-button>
+      <spectric-popover position="left" .text=${calendar}></spectric-popover>
+    `;
+  }
+}
+
+interface CalendarEvents {
+  select: (event: CustomEvent<Date>) => void;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "spectric-calendar": HTMLElementTagWithEvents<
+      SpectricCalendar,
+      CalendarEvents
+    >;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * @see {@link SpectricCalendar}
+       */
+      "spectric-calendar": ReactElementWithPropsAndEvents<
+        SpectricCalendar,
+        SpectricCalendarProps,
+        CalendarEvents
+      >;
+    }
+  }
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        /**
+         * @see {@link SpectricCalendar}
+         */
+        "spectric-calendar": ReactElementWithPropsAndEvents<
+          SpectricCalendar,
+          SpectricCalendarProps,
+          CalendarEvents
+        >;
+      }
+    }
+  }
+}

package/src/components/calendar/index.ts

@@ -0,0 +1 @@
+export * from "./calendar"

package/src/components/color_picker/ColorPicker.css

@@ -1,4 +1,4 @@
-spectric-input.hue-gradient input[type="range"]::-webkit-slider-runnable-track {
+spectric-input.hue-gradient input[type=range]::-moz-range-track {
     background: linear-gradient(
     to right,
     hsl(0, 100%, 50%),   /* Red */
@@ -8,7 +8,21 @@ spectric-input.hue-gradient input[type="range"]::-webkit-slider-runnable-track {
     hsl(240, 100%, 50%), /* Blue */
     hsl(300, 100%, 50%), /* Magenta */
     hsl(360, 100%, 50%)  /* Red (completes the circle) */
-  )
+  );
+  height: 15px;
+}
+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) */
+  );
+  height: 15px;
 }
 
 spectric-input.alpha-gradient input[type="range"]::-webkit-slider-runnable-track {
@@ -22,6 +36,22 @@ spectric-input.alpha-gradient input[type="range"]::-webkit-slider-runnable-track
     #fff 50% 75%, /* White for the third quarter */
     #000 75% 100% /* Black for the fourth quarter */
   ) 50% / 10px 10px;
+  height: 15px;
+    
+}
+
+spectric-input.alpha-gradient input[type=range]::-moz-range-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;
+  height: 15px;
     
 }
 spectric-input.alpha-gradient input[type="range"],spectric-input.hue-gradient input[type="range"]{  -webkit-appearance: none; /* For WebKit browsers (Chrome, Safari) */
@@ -36,5 +66,8 @@ spectric-input.alpha-gradient input[type="range"],spectric-input.hue-gradient in
     cursor: crosshair;
 }
 .color-picker-eyedropper{
-    --button-border-radius:50%
+    --button-border-radius:50%;
+}
+.color-picker-eyedropper.hidden{
+    display:none;
 }