@spectric/ui 0.0.21 → 0.0.23

package/dist/style.css

@@ -1 +1 @@
-spectric-input{--input-color: var(--spectric-input-color, #f4f4f4);--border-radius: var(--spectric-border-radius, .4em);--input-bottom: var(--spectric-input-bottom, var(--spectric-button-primary, #a8a8a8));--input-bottom-focused: var(--primary, #1ea7fd);--text-on-color: var(--spectric-text-on-color, #ffffff);--text-on-color-disabled: var(--spectric-text-on-color-disabled, #8d8d8d);--text-placeholder: rgba(22, 22, 22, .4);--text-primary: var(--spectric-text-primary, #161616);--text-secondary: var(--spectric-text-secondary, #525252)}spectric-input .inputWrapper{color:var(--text-secondary)}spectric-input .inputWrapper input{box-sizing:border-box;margin:0;vertical-align:baseline;font-size:.875rem;font-weight:400;line-height:1.28572;letter-spacing:.16px;outline:transparent solid 2px;outline-offset:-2px;border:none;padding:0 1rem;background-color:var(--input-color);color:var(--text-primary, #161616);font-family:inherit;inline-size:100%;block-size:2.5rem}spectric-input .inputWrapper .inputContainer:active:after,spectric-input .inputContainer:focus-within:after{border-bottom-color:var(--input-bottom-focused);width:calc(100% - 5px);transition:width .4s ease-in-out}spectric-input .inputWrapper input:read-only{background-color:transparent;border-bottom-color:var(--border-disabled)}spectric-input .inputContainer{position:relative;border-radius:var(--border-radius);overflow:hidden}spectric-input .inputContainer:after{content:"";width:0px;transition:background-color .4s cubic-bezier(.2,0,.38,.9),border-bottom-color .4s cubic-bezier(.2,0,.38,.9);border-bottom-color:var(--input-bottom);border-bottom-style:solid;border-bottom-width:1px;position:absolute;left:2.5px;bottom:0}spectric-input #helper-text{height:18px}spectric-input #helper-text.hidden{display:none}spectric-input .input-button-right{position:absolute;right:4px;bottom:3px}spectric-input .checkbox{display:flex;justify-self:center}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}
+spectric-input{--input-color: var(--spectric-input-color, #f4f4f4);--border-radius: var(--spectric-border-radius, .4em);--input-bottom: var(--spectric-input-bottom, var(--spectric-button-primary, #a8a8a8));--input-bottom-focused: var(--primary, #1ea7fd);--text-on-color: var(--spectric-text-on-color, #ffffff);--text-on-color-disabled: var(--spectric-text-on-color-disabled, #8d8d8d);--text-placeholder: rgba(22, 22, 22, .4);--text-primary: var(--spectric-text-primary, #161616);--text-secondary: var(--spectric-text-secondary, #525252)}spectric-input .inputWrapper{color:var(--text-secondary)}spectric-input .inputWrapper input{box-sizing:border-box;margin:0;vertical-align:baseline;font-size:.875rem;font-weight:400;line-height:1.28572;letter-spacing:.16px;outline:transparent solid 2px;outline-offset:-2px;border:none;padding:0 1rem;background-color:var(--input-color);color:var(--text-primary, #161616);font-family:inherit;inline-size:100%;block-size:2.5rem}spectric-input .inputWrapper .inputContainer:active:after,spectric-input .inputContainer:focus-within:after{border-bottom-color:var(--input-bottom-focused);width:calc(100% - 5px);transition:width .4s ease-in-out}spectric-input .inputWrapper input:read-only{background-color:transparent;border-bottom-color:var(--border-disabled)}spectric-input .inputContainer{position:relative;border-radius:var(--border-radius);overflow:hidden}spectric-input .inputContainer:after{content:"";width:0px;transition:background-color .4s cubic-bezier(.2,0,.38,.9),border-bottom-color .4s cubic-bezier(.2,0,.38,.9);border-bottom-color:var(--input-bottom);border-bottom-style:solid;border-bottom-width:1px;position:absolute;left:2.5px;bottom:0}spectric-input #helper-text{height:18px}spectric-input #helper-text.hidden{display:none}spectric-input .input-button-right{position:absolute;right:4px;bottom:3px}spectric-input .checkbox{display:flex;justify-self:center;align-items:center}spectric-input .checkbox spectric-button~span{padding-left:5px}spectric-input spectric-colorpicker{display:block}spectric-input[variant=color] .fieldwrapper{display:inline-block}spectric-query{font-family:monospace}spectric-query .autocomplete{color:var(--spectric-text-primary, #161616);border-radius:0em 0em var(--spectric-border-radius, .4em) var(--spectric-border-radius, .4em);background-color:var(--spectric-background, #ffffff);border:1px solid var(--spectric-background-hover, rgba(141, 141, 141, .12));max-height:300px;border-top:0px;margin:0;position:fixed;top:anchor(bottom);justify-self:anchor-center;text-align:center}spectric-query .autocomplete [popover]{overflow:visible}spectric-query .autocomplete .tooltip-content{width:100%}spectric-query .autocomplete .optiontype{float:left;max-width:10px}spectric-query .autocomplete .label{position:absolute;right:0}spectric-query .autocomplete .option.active,spectric-query .autocomplete .option:hover{background-color:var(--spectric-background-hover, rgba(141, 141, 141, .12));border-bottom:1px solid var(--primary, #1ea7fd)}spectric-query .autocomplete .option{border-bottom:1px solid transparent;padding:8px}.query-bar-date-quick-select{display:flex;justify-content:space-evenly}spectric-pagination .spectric-pagination-container{display:flex;justify-content:space-between;align-items:center}spectric-pagination .spectric-pagination-text{flex-grow:1;text-align:center}spectric-table{display:flex;flex-direction:column;overflow:hidden;line-height:1}spectric-table .table-wrapper{overflow:auto;flex-grow:1;position:relative}spectric-table tr{text-align:center}spectric-table tr.odd{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 90%)}spectric-table spectric-table-virtual-body tr:hover{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 70%)}spectric-table spectric-table-virtual-body tr{height:var(--rowHeight)}spectric-table td{padding:1px;border:1px solid transparent}spectric-table spectric-table-virtual-body td{height:var(--rowHeight)}spectric-table div[role=table]{display:table;min-width:100%}spectric-table-cell{display:contents;vertical-align:middle}spectric-table-cell td{position:relative}spectric-table td:hover:has(.hasActions){border:1px solid var(--spectric-primary, #1ea7fd)}spectric-table-cell .table-cell-actions{position:absolute;display:flex;width:100%;flex-direction:row-reverse;visibility:hidden;z-index:1}spectric-table-cell .table-cell-actions.tiny{top:-10px}spectric-table-cell .table-cell-actions.xxsmall{top:-16px}spectric-table-cell td:hover .table-cell-actions{visibility:unset}spectric-table .table-checkbox-single spectric-button{--button-border-radius: 50%}spectric-input.table-checkbox-single[checked] spectric-button{--text-on-color: transparent;border-radius:50%;position:relative}spectric-input.table-checkbox-single[checked] spectric-button:before{position:absolute;content:" ";height:50%;width:50%;left:25%;top:25%;border-radius:50%;z-index:1;box-shadow:0 0 0 4px var(--input-color)}spectric-table .cell-contents{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lineClamp,1);-webkit-box-pack:center;overflow:hidden;text-overflow:ellipsis;font-size:var(--fontSize);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.21",
+  "version": "0.0.23",
   "type": "module",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",
@@ -12,6 +12,7 @@
   ],
   "scripts": {
     "build": "tsc && vite build",
+    "build:peg": "npx grunt peg",
     "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",
@@ -20,6 +21,7 @@
     "type-check": "tsc --noemit"
   },
   "dependencies": {
+    "@terraformer/wkt": "^2.2.1",
     "lit": "^3.2.1"
   },
   "devDependencies": {
@@ -32,6 +34,9 @@
     "@storybook/web-components": "^8.4.6",
     "@storybook/web-components-vite": "^8.4.6",
     "@types/react": "^18.3.12",
+    "@types/terraformer__wkt": "^2.0.3",
+    "grunt": "^1.6.1",
+    "peggy": "^5.0.6",
     "storybook": "^8.4.6",
     "typescript": "~5.6.2",
     "vite": "^5.4.10",

package/src/components/dialog/dialog.css.ts

@@ -1,50 +1,50 @@
 import { css } from "lit";
 
 export const style = css`
-:host {
+  :host {
     --dialog-padding: var(--spectric-dialog-padding, 5px);
-    --dialog-background:var(--spectric-background,rgb(246, 249, 252));
-}
-dialog {
-    border: 0px solid var(--background-inverse);
+    --dialog-background: var(--spectric-background, rgb(246, 249, 252));
+    --dialog-border-radius: var(--spectric-border-radius, 0.4em);
+  }
+  dialog {
+    border: 0px;
     --spectric-background: var(--dialog-background);
-    --panel-color:var(--dialog-background);
+    --panel-color: var(--dialog-background);
     padding: 0;
-    border-radius: var(--spectric-border-radius);
-    overflow:hidden;
-
-}
-dialog[open]{
-    display:flex;
-}
-spectric-panel{
-    margin:0px
-}
-dialog::backdrop {
+    border-radius: var(--dialog-border-radius);
+    overflow: hidden;
+  }
+  dialog[open] {
+    display: flex;
+  }
+  spectric-panel {
+    margin: 0px;
+  }
+  dialog::backdrop {
     background-color: transparent;
-}
-dialog.backdrop::backdrop {
+  }
+  dialog.backdrop::backdrop {
     background-color: rgba(0, 0, 0, 0.5);
-}
-.modal{
+  }
+  .modal {
     display: flex;
     overflow: hidden;
     flex-direction: column;
     height: 100%;
-}
-.content{
+  }
+  .content {
     flex-shrink: 1;
     overflow: auto;
-}
+  }
 
-h3 {
+  h3 {
     padding: 1em var(--dialog-padding);
     margin: 0;
-}
+  }
 
-spectric-button{
+  spectric-button {
     position: absolute;
     right: 0;
     top: 0;
-}
-`;
+  }
+`;

package/src/components/dialog/dialog.ts

@@ -6,6 +6,7 @@ import {
   HTMLElementTagWithEvents,
   ReactElementWithPropsAndEvents,
 } from "../types";
+import "../Panel";
 export const DialogElementTag = "spectric-dialog";
 export type { DialogProps as Props, DialogEvents };
 interface DialogProps {
@@ -20,6 +21,7 @@ interface DialogProps {
 /**
  * Dialog Element
  * @slot title - sets the title of the dialog attribute/property can also be use for setting the title to a string
+ * @slot footer - Space at the bottom of the dialog that you can put buttons or other tools
  */
 @customElement(DialogElementTag)
 export class DialogElement extends LitElement implements DialogProps {
@@ -131,7 +133,7 @@ export class DialogElement extends LitElement implements DialogProps {
             ${this.dismissable
               ? html`<spectric-button
                   variant="text"
-                  size="small"
+                  size="xsmall"
                   @click=${() => {
                     this.open = false;
                   }}

package/src/components/input.css

@@ -78,6 +78,11 @@ spectric-input .input-button-right {
 spectric-input .checkbox{
     display: flex;
     justify-self: center;
+    align-items: center;
+}
+/* Padding for checkbox label */
+spectric-input .checkbox spectric-button ~ span{
+    padding-left: 5px;
 }
 spectric-input spectric-colorpicker{
     display: block;

package/src/components/input.ts

@@ -85,7 +85,7 @@ export interface InputProps {
 @customElement("spectric-input")
 export class SpectricInput extends LitElement implements InputProps {
   @property({ type: Boolean, reflect: true })
-  checked?: boolean;
+  checked?: boolean = false;
   size?: ButtonSizesTypes;
   files: FileList | null = null;
   //static styles?: CSSResultGroup | undefined = style;
@@ -246,7 +246,10 @@ export class SpectricInput extends LitElement implements InputProps {
     this.requestUpdate();
   };
   protected updated(changedProperties: PropertyValues): void {
-    if (changedProperties.has("checked")) {
+    if (
+      changedProperties.has("checked") &&
+      changedProperties.get("checked") !== undefined
+    ) {
       this.dispatchEvent(new Event("change", { bubbles: true }));
     }
   }
@@ -261,14 +264,14 @@ export class SpectricInput extends LitElement implements InputProps {
     this.dispatchEvent(new Event("change", { bubbles: true }));
   }
   protected render(): unknown {
-    const calendar = html`<spectric-calendar 
-                        .popup=${this.variant === InputVariants.datePopup}
-                        @select=${(e: CustomEvent<Date>) => {
+    const calendar = html`<spectric-calendar
+      .popup=${this.variant === InputVariants.datePopup}
+      @select=${(e: CustomEvent<Date>) => {
         this.value = e.detail.toISOString();
-        this.querySelector<PopoverElement>("spectric-popover")?.hidePopover()
-      }
-      }>
-              </spectric-calendar>`
+        this.querySelector<PopoverElement>("spectric-popover")?.hidePopover();
+      }}
+    >
+    </spectric-calendar>`;
     switch (this.variant) {
       case InputVariants.Text:
       case InputVariants.password:
@@ -287,8 +290,8 @@ export class SpectricInput extends LitElement implements InputProps {
               <div class="--text-input__label-wrapper">
                 ${this.label}
                 ${this.maxCount > 0 && this._value
-            ? `${(this._value as String).length}/${this.maxCount}`
-            : null}
+                  ? `${(this._value as String).length}/${this.maxCount}`
+                  : null}
               </div>
             </div>
             <div class="fieldwrapper">
@@ -306,24 +309,28 @@ export class SpectricInput extends LitElement implements InputProps {
                   ?readonly="${this.readonly}"
                   ?required="${this.required}"
                   type="${ifNonEmpty(
-              this.variant !== InputVariants.password
-                ? this.variant !== InputVariants.date ? this.variant : InputVariants.Text
-                : this._showPassword
-                  ? InputVariants.Text
-                  : InputVariants.password
-            )}"
+                    this.variant !== InputVariants.password
+                      ? this.variant !== InputVariants.date
+                        ? this.variant
+                        : InputVariants.Text
+                      : this._showPassword
+                      ? InputVariants.Text
+                      : InputVariants.password
+                  )}"
                   .value="${this._value as string}"
                   maxlength="${ifNonEmpty(
-              this.maxCount > 0 ? this.maxCount : undefined
-            )}"
+                    this.maxCount > 0 ? this.maxCount : undefined
+                  )}"
                   @input="${this._handleInput}"
                   @change=${this._handleChange}
                 />
 
-            ${this.variant === String(InputVariants.datePopup) ? calendar : null}
+                ${this.variant === String(InputVariants.datePopup)
+                  ? calendar
+                  : null}
                 ${this.variant === String(InputVariants.password) &&
-            this.showPasswordVisibilityToggle
-            ? html`
+                this.showPasswordVisibilityToggle
+                  ? html`
                       <spectric-button
                         icon
                         class="input-button-right"
@@ -333,11 +340,11 @@ export class SpectricInput extends LitElement implements InputProps {
                         @click=${this.handleTogglePasswordVisibility}
                       >
                         ${this._showPassword
-                ? this.hidePasswordLabel
-                : this.showPasswordLabel}
+                          ? this.hidePasswordLabel
+                          : this.showPasswordLabel}
                       </spectric-button>
                     `
-            : null}
+                  : null}
               </div>
               <div
                 id="helper-text"
@@ -355,10 +362,11 @@ export class SpectricInput extends LitElement implements InputProps {
         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.label} ${
+          this.maxCount > 0 && this._value
             ? `${(this._value as String).length}/${this.maxCount}`
             : null
-          }
+        }
                     </div> 
                 </div>
               <div class="fieldwrapper">
@@ -366,20 +374,21 @@ export class SpectricInput extends LitElement implements InputProps {
                   <input type="hidden" .value=${String(this.value)} > </input>
                   <spectric-colorpicker 
                   @cancel=${(e: DomEvent<SpectricColorPicker>) => {
-            this.value = e.target.value;
-          }}
+                    this.value = e.target.value;
+                  }}
                   @change=${(e: DomEvent<SpectricColorPicker>) => {
-            e.stopPropagation();
-            this.value = e.target.value;
-            this._handleChange(e);
-          }} .value=${String(this.value)}></spectric-colorpicker>
+                    e.stopPropagation();
+                    this.value = e.target.value;
+                    this._handleChange(e);
+                  }} .value=${String(this.value)}></spectric-colorpicker>
                 </div>
                 <div
                     id="helper-text"
                     class="${this.helperText || this.invalid ? "" : "hidden"}"
                     >
-                    <slot name="helper-text"> ${this.invalid ? this.invalidText : this.helperText
-          } </slot>
+                    <slot name="helper-text"> ${
+                      this.invalid ? this.invalidText : this.helperText
+                    } </slot>
                   </div>
 
               </div>
@@ -393,12 +402,12 @@ export class SpectricInput extends LitElement implements InputProps {
         <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.label}
+          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.label.length ? html`<span>${this.label}</span>` : null}
         </div>
         </label>
         `;