@spectric/ui 0.0.20 → 0.0.22

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}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(.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.20",
+  "version": "0.0.22",
   "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/Banner.ts

@@ -1,35 +1,35 @@
-import { html, LitElement } from 'lit';
-import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
-import "./Button"
-import { customElement, property } from 'lit/decorators.js';
-import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from './types';
+import { html, LitElement } from "lit";
+import { StyleInfo, styleMap } from "lit/directives/style-map.js";
+import "./Button";
+import { customElement, property } from "lit/decorators.js";
+import {
+  HTMLElementTagWithEvents,
+  ReactElementWithPropsAndEvents,
+} from "./types";
 
 export interface BannerProps {
   /**What is returned in the event details when a banner is dismissed */
-  bannerId?: any,
+  bannerId?: any;
   /** Banner Text to display */
   text?: string;
   /** What background color to use */
   headerStyle?: StyleInfo;
   /** Can be dismissed */
   dismissable?: boolean;
-
 }
 
-
-
 const DEFAULT_STYLE: StyleInfo = {
   display: "flex",
   alignItems: "center",
   backgroundColor: "black",
   color: "white",
-  textAlign: "center"
-}
+  textAlign: "center",
+};
 
 /**
  * @slot text - Banner Text content
  */
-@customElement('spectric-banner')
+@customElement("spectric-banner")
 export class SpectricBanner extends LitElement implements BannerProps {
   @property({ type: Boolean, reflect: true })
   dismissable: boolean = false;
@@ -45,40 +45,47 @@ export class SpectricBanner extends LitElement implements BannerProps {
   private _dismissed: boolean = false;
 
   private onDismiss = (e: PointerEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
+    e.preventDefault();
+    e.stopPropagation();
     const options = {
       bubbles: true,
       composed: true,
     };
     this._dismissed = true;
-    let { bannerId, text, headerStyle, dismissable }: BannerProps = this
-    this.dispatchEvent(new CustomEvent<BannerProps>('bannerDismissed', {
-      detail: { bannerId, text, headerStyle, dismissable },
-      ...options
-    }));
-  }
+    let { bannerId, text, headerStyle, dismissable }: BannerProps = this;
+    this.dispatchEvent(
+      new CustomEvent<BannerProps>("bannerDismissed", {
+        detail: { bannerId, text, headerStyle, dismissable },
+        ...options,
+      })
+    );
+  };
   protected render(): unknown {
     if (this._dismissed) {
-      return
+      return;
     }
     return html`
-        <header style=${styleMap({ ...DEFAULT_STYLE, ...this.headerStyle })}>
-        <div style="flex-grow:1"><slot name="text">${this.text}</slot><slot></slot></div>
-        ${this.dismissable ? html`<spectric-button size="small" @click=${this.onDismiss}>X</spectric-button>` : null}
-        </header>
+      <header style=${styleMap({ ...DEFAULT_STYLE, ...this.headerStyle })}>
+        <div style="flex-grow:1">
+          <slot name="text">${this.text}</slot><slot></slot>
+        </div>
+        ${this.dismissable
+          ? html`<spectric-button size="small" @click=${this.onDismiss} icon
+              >X</spectric-button
+            >`
+          : null}
+      </header>
     `;
   }
 }
 
 export interface BannerEventMap {
-  'bannerDismissed': (event: CustomEvent<BannerProps>) => void
+  bannerDismissed: (event: CustomEvent<BannerProps>) => void;
 }
 
 declare global {
-
   interface HTMLElementTagNameMap {
-    "spectric-banner": HTMLElementTagWithEvents<SpectricBanner, BannerEventMap>
+    "spectric-banner": HTMLElementTagWithEvents<SpectricBanner, BannerEventMap>;
   }
 
   namespace JSX {
@@ -86,7 +93,11 @@ declare global {
       /**
        * {@link SpectricBanner}
        */
-      "spectric-banner": ReactElementWithPropsAndEvents<SpectricBanner, BannerProps, BannerEventMap>;
+      "spectric-banner": ReactElementWithPropsAndEvents<
+        SpectricBanner,
+        BannerProps,
+        BannerEventMap
+      >;
     }
   }
   namespace React {
@@ -95,8 +106,12 @@ declare global {
         /**
          * {@link SpectricBanner}
          */
-        "spectric-banner": ReactElementWithPropsAndEvents<SpectricBanner, BannerProps, BannerEventMap>;
+        "spectric-banner": ReactElementWithPropsAndEvents<
+          SpectricBanner,
+          BannerProps,
+          BannerEventMap
+        >;
       }
     }
   }
-}
+}

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

@@ -1,163 +1,193 @@
-import { CSSResultGroup, html, LitElement, PropertyValues, render } from 'lit';
+import { CSSResultGroup, html, LitElement, PropertyValues, render } from "lit";
 import "../Button";
-import { customElement, property, queryAsync } from 'lit/decorators.js';
-import { style } from './dialog.css';
-import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
-export const DialogElementTag = "spectric-dialog"
-export type { DialogProps as Props, DialogEvents }
+import { customElement, property, queryAsync } from "lit/decorators.js";
+import { style } from "./dialog.css";
+import {
+  HTMLElementTagWithEvents,
+  ReactElementWithPropsAndEvents,
+} from "../types";
+import "../Panel";
+export const DialogElementTag = "spectric-dialog";
+export type { DialogProps as Props, DialogEvents };
 interface DialogProps {
-    open?: boolean;
-    dismissable?: boolean;
-    hideBackdrop?: boolean;
-    title?: string;
-    closeOnEscape?: boolean;
-    closeOnOutsideClick?: boolean;
+  open?: boolean;
+  dismissable?: boolean;
+  hideBackdrop?: boolean;
+  title?: string;
+  closeOnEscape?: boolean;
+  closeOnOutsideClick?: boolean;
 }
 
-
-
 /**
  * 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 {
-    static styles: CSSResultGroup = style;
-    static display(props: DialogProps, body: any) {
-        let dialog = document.createElement(DialogElementTag);
-        dialog.addEventListener("close", () => {
-            dialog.remove()
-        });
-        for (let prop in props) {
-            //@ts-ignore
-            dialog[prop] = props[prop];
+  static styles: CSSResultGroup = style;
+  static display(props: DialogProps, body: any) {
+    let dialog = document.createElement(DialogElementTag);
+    dialog.addEventListener("close", () => {
+      dialog.remove();
+    });
+    for (let prop in props) {
+      //@ts-ignore
+      dialog[prop] = props[prop];
+    }
+    let frag = document.createDocumentFragment();
+    render(body, frag);
+    dialog.appendChild(frag);
+    dialog.open = true;
+    document.body.appendChild(dialog);
+    return dialog;
+  }
+  @property({ type: Boolean, reflect: true })
+  open: boolean = false;
+
+  @property({ type: Boolean, reflect: true })
+  dismissable: boolean = true;
+
+  @property({ type: Boolean, reflect: true })
+  hideBackdrop: boolean = false;
+
+  @property({ type: String, reflect: true })
+  title: string = "";
+
+  @property({ type: Boolean, reflect: true })
+  closeOnEscape: boolean = true;
+
+  @property({ type: Boolean, reflect: true })
+  closeOnOutsideClick: boolean = true;
+
+  @queryAsync("dialog")
+  dialogElement!: Promise<HTMLDialogElement>;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.dialogElement.then((dialog) =>
+      dialog.addEventListener("keydown", this._handleKeyDown)
+    );
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.dialogElement.then((dialog) =>
+      dialog.removeEventListener("keydown", this._handleKeyDown)
+    );
+  }
+
+  protected updated(_changedProperties: PropertyValues): void {
+    if (_changedProperties.has("open")) {
+      this.dialogElement.then((dialog) => {
+        if (this.open) {
+          dialog.showModal();
+        } else {
+          dialog.close();
         }
-        let frag = document.createDocumentFragment()
-        render(body, frag);
-        dialog.appendChild(frag)
-        dialog.open = true;
-        document.body.appendChild(dialog)
-        return dialog
+      });
     }
-    @property({ type: Boolean, reflect: true })
-    open: boolean = false;
-
-    @property({ type: Boolean, reflect: true })
-    dismissable: boolean = true;
-
-    @property({ type: Boolean, reflect: true })
-    hideBackdrop: boolean = false;
-
-    @property({ type: String, reflect: true })
-    title: string = "";
+  }
 
-    @property({ type: Boolean, reflect: true })
-    closeOnEscape: boolean = true;
-
-    @property({ type: Boolean, reflect: true })
-    closeOnOutsideClick: boolean = true;
-
-    @queryAsync("dialog")
-    dialogElement!: Promise<HTMLDialogElement>;
-
-    connectedCallback(): void {
-        super.connectedCallback();
-        this.dialogElement.then(dialog => dialog.addEventListener('keydown', this._handleKeyDown));
+  private clickHandler = async (e: PointerEvent): Promise<void> => {
+    const dialog = await this.dialogElement;
+    if (!this.dismissable || !this.closeOnOutsideClick) {
+      return;
     }
-
-    disconnectedCallback(): void {
-        super.disconnectedCallback();
-        this.dialogElement.then(dialog => dialog.removeEventListener('keydown', this._handleKeyDown));
+    if (dialog === e.target) {
+      // clicked on backdrop
+      this.open = false;
     }
+  };
 
-    protected updated(_changedProperties: PropertyValues): void {
-        if (_changedProperties.has("open")) {
-            this.dialogElement.then(dialog => {
-                if (this.open) {
-                    dialog.showModal();
-                } else {
-                    dialog.close();
-                }
-            });
-        }
+  private _handleKeyDown = (e: KeyboardEvent): void => {
+    if (!this.closeOnEscape) {
+      e.preventDefault();
     }
-
-    private clickHandler = async (e: PointerEvent): Promise<void> => {
-        const dialog = await this.dialogElement;
-        if (!this.dismissable || !this.closeOnOutsideClick) {
-            return;
-        }
-        if (dialog === e.target) {
-            // clicked on backdrop
-            this.open = false;
-        }
-    };
-
-    private _handleKeyDown = (e: KeyboardEvent): void => {
-        if (!this.closeOnEscape) {
-            e.preventDefault()
-        }
-        if (this.open && this.closeOnEscape && e.key === 'Escape') {
-            this.open = false;
-        }
-    };
-
-    private _onClose = (e: PointerEvent): void => {
-        e.preventDefault();
-        e.stopPropagation();
-        this.open = false;
-        this.dispatchEvent(new CustomEvent('close', {
-            bubbles: true,
-            composed: true,
-        }));
-    };
-
-    protected render(): unknown {
-        return html`
-            <dialog class=${this.hideBackdrop ? '' : 'backdrop'} @close=${this._onClose} @click=${this.clickHandler}>
-                <spectric-panel>
-                    <div class="modal">
-                    ${this.dismissable ? html`<spectric-button variant="text" size="small" @click=${() => { this.open = false }}>X</spectric-button>` : null}
-                        <h3 >
-                            <slot name="title">
-                                ${this.title.length ? this.title : null}
-                            </slot>
-                        </h3>
-
-                        <div class="content"><slot></slot></div>
-                        <div class="footer"><slot name="footer"></slot></div>
-                    </div>
-                </spectric-panel>
-            </dialog>
-        `;
+    if (this.open && this.closeOnEscape && e.key === "Escape") {
+      this.open = false;
     }
+  };
+
+  private _onClose = (e: PointerEvent): void => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.open = false;
+    this.dispatchEvent(
+      new CustomEvent("close", {
+        bubbles: true,
+        composed: true,
+      })
+    );
+  };
+
+  protected render(): unknown {
+    return html`
+      <dialog
+        class=${this.hideBackdrop ? "" : "backdrop"}
+        @close=${this._onClose}
+        @click=${this.clickHandler}
+      >
+        <spectric-panel>
+          <div class="modal">
+            ${this.dismissable
+              ? html`<spectric-button
+                  variant="text"
+                  size="xsmall"
+                  @click=${() => {
+                    this.open = false;
+                  }}
+                  icon
+                  >X</spectric-button
+                >`
+              : null}
+            <h3>
+              <slot name="title">
+                ${this.title.length ? this.title : null}
+              </slot>
+            </h3>
+
+            <div class="content"><slot></slot></div>
+            <div class="footer"><slot name="footer"></slot></div>
+          </div>
+        </spectric-panel>
+      </dialog>
+    `;
+  }
 }
 
 interface DialogEvents {
-    'close': (event: CustomEvent) => void;
+  close: (event: CustomEvent) => void;
 }
 
 declare global {
-    interface HTMLElementTagNameMap {
-        [DialogElementTag]: HTMLElementTagWithEvents<DialogElement, DialogEvents>
-
+  interface HTMLElementTagNameMap {
+    [DialogElementTag]: HTMLElementTagWithEvents<DialogElement, DialogEvents>;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * @see {@link DialogElement}
+       */
+      [DialogElementTag]: ReactElementWithPropsAndEvents<
+        DialogElement,
+        DialogProps,
+        DialogEvents
+      >;
     }
+  }
+  namespace React {
     namespace JSX {
-        interface IntrinsicElements {
-            /**
-             * @see {@link DialogElement}
-             */
-            [DialogElementTag]: ReactElementWithPropsAndEvents<DialogElement, DialogProps, DialogEvents>;
-        }
-    }
-    namespace React {
-        namespace JSX {
-            interface IntrinsicElements {
-                /**
-                 * @see {@link DialogElement}
-                 */
-                [DialogElementTag]: ReactElementWithPropsAndEvents<DialogElement, DialogProps, DialogEvents>
-            }
-        }
+      interface IntrinsicElements {
+        /**
+         * @see {@link DialogElement}
+         */
+        [DialogElementTag]: ReactElementWithPropsAndEvents<
+          DialogElement,
+          DialogProps,
+          DialogEvents
+        >;
+      }
     }
+  }
 }