@spectric/ui 0.0.8 → 0.0.10

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 spectric-button{position:absolute;right:4px;bottom:3px}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}spectric-table tr{text-align:center}spectric-table-header{display:table-header-group}spectric-table div[role=table]{display:table}spectric-table-body{display:table-row-group}spectric-table-cell{display:contents}spectric-table-cell td{position:relative}spectric-table .filterable{padding-top:10px}spectric-table-cell .table-cell-actions{position:absolute;display:flex;width:100%;flex-direction:row-reverse;visibility:hidden}spectric-table-cell td:hover .table-cell-actions{visibility:unset}
+spectric-input{--input-color: var(--spectric-input-color, #f4f4f4);--border-radius: var(--spectric-border-radius, .4em);--input-bottom: var(--spectric-input-bottom, var(--spectric-button-primary, #a8a8a8));--input-bottom-focused: var(--primary, #1ea7fd);--text-on-color: var(--spectric-text-on-color, #ffffff);--text-on-color-disabled: var(--spectric-text-on-color-disabled, #8d8d8d);--text-placeholder: rgba(22, 22, 22, .4);--text-primary: var(--spectric-text-primary, #161616);--text-secondary: var(--spectric-text-secondary, #525252)}spectric-input .inputWrapper{color:var(--text-secondary)}spectric-input .inputWrapper input{box-sizing:border-box;margin:0;vertical-align:baseline;font-size:.875rem;font-weight:400;line-height:1.28572;letter-spacing:.16px;outline:transparent solid 2px;outline-offset:-2px;border:none;padding:0 1rem;background-color:var(--input-color);color:var(--text-primary, #161616);font-family:inherit;inline-size:100%;block-size:2.5rem}spectric-input .inputWrapper .inputContainer:active:after,spectric-input .inputContainer:focus-within:after{border-bottom-color:var(--input-bottom-focused);width:calc(100% - 5px);transition:width .4s ease-in-out}spectric-input .inputWrapper input:read-only{background-color:transparent;border-bottom-color:var(--border-disabled)}spectric-input .inputContainer{position:relative;border-radius:var(--border-radius);overflow:hidden}spectric-input .inputContainer:after{content:"";width:0px;transition:background-color .4s cubic-bezier(.2,0,.38,.9),border-bottom-color .4s cubic-bezier(.2,0,.38,.9);border-bottom-color:var(--input-bottom);border-bottom-style:solid;border-bottom-width:1px;position:absolute;left:2.5px;bottom:0}spectric-input #helper-text{height:18px}spectric-input[variant=password] spectric-button{position:absolute;right:4px;bottom:3px}spectric-input .checkbox{display:flex;justify-self:center}spectric-query{font-family:monospace}spectric-query .autocomplete{color:var(--spectric-text-primary, #161616);border-radius:0em 0em var(--spectric-border-radius, .4em) var(--spectric-border-radius, .4em);background-color:var(--spectric-background, #ffffff);border:1px solid var(--spectric-background-hover, rgba(141, 141, 141, .12));max-height:300px;border-top:0px;margin:-18px 0 0;position:fixed;top:anchor(bottom);justify-self:anchor-center;text-align:center}spectric-query .autocomplete .optiontype{float:left;max-width:10px}spectric-query .autocomplete .label{position:absolute;right:0}spectric-query .autocomplete .option.active,spectric-query .autocomplete .option:hover{background-color:var(--spectric-background-hover, rgba(141, 141, 141, .12));border-bottom:1px solid var(--primary, #1ea7fd)}spectric-query .autocomplete .option{border-bottom:1px solid transparent;padding:8px}.query-bar-date-quick-select{display:flex;justify-content:space-evenly}spectric-pagination .spectric-pagination-container{display:flex;justify-content:space-between;align-items:center}spectric-pagination .spectric-pagination-text{flex-grow:1;text-align:center}spectric-table{display:flex;flex-direction:column}spectric-table tr{text-align:center}spectric-table-body tr:hover{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 70%)}spectric-table-header{display:table-header-group;font-weight:700}spectric-table div[role=table]{display:table}spectric-table-body{display:table-row-group}spectric-table-cell{display:contents;vertical-align:middle}spectric-table-cell td{position:relative}spectric-table td:hover:has(.filterable){border:1px solid var(--spectric-primary, #1ea7fd)}spectric-table td{border:1px solid transparent}spectric-table-cell .table-cell-actions{position:absolute;display:flex;width:100%;flex-direction:row-reverse;visibility:hidden;top:-10px}spectric-table-cell td:hover .table-cell-actions{visibility:unset}.spectric-tooltip-portal{position:fixed;z-index:9999;pointer-events:none;--spectric-tooltip-background: color-mix(in srgb,var(--spectric-background-inverse,#f4f4f4) 100%,var(--spectric-primary,#1ea7fd) 90%) }.spectric-tooltip-portal .tooltip-container{display:flex;justify-content:center;align-items:center}.spectric-tooltip-portal.top .tooltip-container{flex-direction:column-reverse}.spectric-tooltip-portal.bottom .tooltip-container{flex-direction:column}.spectric-tooltip-portal.left .tooltip-container{flex-direction:row-reverse}.spectric-tooltip-portal .tooltip-content{background:var(--spectric-tooltip-background);border-radius:var(--spectric-border-radius,.4em);box-shadow:0 0 .01em .01em color-mix(in srgb,var(--spectric-background-hover,rgba(141, 141, 141, .12)) 90%,var(--spectric-text-on-color,#ffffff) 90%);padding:.2em;color:var(--spectric-text-on-color,#ffffff)}.spectric-tooltip-portal .tooltip-caret{background:var(--spectric-tooltip-background)}.spectric-tooltip-portal.top .tooltip-caret,.spectric-tooltip-portal.bottom .tooltip-caret{inline-size:.75rem;block-size:.374rem}.spectric-tooltip-portal.left .tooltip-caret,.spectric-tooltip-portal.right .tooltip-caret{inline-size:.375rem;block-size:.75rem}.spectric-tooltip-portal.top .tooltip-caret{clip-path:polygon(0 0,50% 100%,100% 0)}.spectric-tooltip-portal.bottom .tooltip-caret{clip-path:polygon(0 100%,50% 0,100% 100%)}.spectric-tooltip-portal.left .tooltip-caret{clip-path:polygon(0 0,100% 50%,0 100%)}.spectric-tooltip-portal.right .tooltip-caret{clip-path:polygon(0 50%,100% 0,100% 100%)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spectric/ui",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",

package/src/components/Button.ts

@@ -4,6 +4,8 @@ import { styleMap } from 'lit/directives/style-map.js';
 import style from './button.css';
 import { customElement, property } from 'lit/decorators.js';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from './types';
+import { DomRenderable } from './table';
+import { TooltipPostionsTypes } from './tooltip';
 
 export enum ButtonSizes {
   large = "large",
@@ -23,16 +25,18 @@ export enum ButtonVariants {
 type ButtonVariantsTypes = `${ButtonVariants}`
 export interface ButtonProps {
   /** Is this the principal call to action on the page? */
-  variant: ButtonVariantsTypes;
+  variant?: ButtonVariantsTypes;
   /** What background color to use */
   backgroundColor?: string;
   /** How large should the button be? */
   size: ButtonSizesTypes;
   label?: string,
   /* should the button be disabled*/
-  disabled: boolean;
+  disabled?: boolean;
   danger?: boolean;
   icon?: boolean
+  tooltip?: DomRenderable
+  tooltipPosition?: TooltipPostionsTypes
 }
 const MODES = {
   "primary": 'spectric-button--primary',
@@ -58,7 +62,10 @@ export class SpectricButton extends LitElement implements ButtonProps {
   danger = false;
   @property({ type: Boolean, reflect: true })
   icon: boolean = false;
-
+  @property({ type: String, reflect: true })
+  tooltip?: DomRenderable;
+  @property({ type: String, reflect: true })
+  tooltipPosition?: TooltipPostionsTypes = "right";
   connectedCallback(): void {
     super.connectedCallback()
     this.addEventListener("click", this._onClick, { capture: true })
@@ -74,6 +81,9 @@ export class SpectricButton extends LitElement implements ButtonProps {
     e.preventDefault()
     e.stopImmediatePropagation()
     e.stopPropagation()
+    if (this.disabled) {
+      return
+    }
     const options: CustomEventInit = {
       bubbles: true,
       composed: true,
@@ -85,6 +95,7 @@ export class SpectricButton extends LitElement implements ButtonProps {
   protected render(): unknown {
     const mode = MODES[this.variant] || 'spectric-button--primary';
     return html`
+    ${this.tooltip ? html`<spectric-tooltip .text=${this.tooltip} .position=${this.tooltipPosition || "right"} .triggerTarget=${this}></spectric-tooltip>` : null}
       <button
         type="button"
         ?disabled=${this.disabled}

package/src/components/button.css.ts

@@ -22,9 +22,15 @@ export default css`
     --button-primary-hover: var(--spectric-button-primary-hover, #0050e6);
     --button-secondary-hover: var(--spectric-button-secondary-hover, #474747);
     --button-tertiary-hover: var(--spectric-button-tertiary-hover, #0050e6);
-    --button-disabled: var(--spectric-button-disabled, #c6c6c6);
+    --button-disabled: var(--spectric-button-disabled, #cfcbcb4d);
+}
+:host([disabled]) { 
+  cursor: not-allowed;
+}
+
+:host([disabled]) .animation{ 
+  visibility:hidden;
 }
-:host([disabled]) { pointer-events: none }
 
 .spectric-button {
   pointer-events:none;
@@ -83,8 +89,14 @@ export default css`
     display: flex;
     align-items: center;
     justify-content: center;
+    -webkit-user-select: none; /* For Safari */
+    -moz-user-select: none;    /* For Firefox */
+    -ms-user-select: none;     /* For IE 10+ */
+    user-select: none;         /* Standard syntax */
 }
 
+
+
 /* :host([icon][size="small"]){
   height:12px;
   width:12px;
@@ -132,6 +144,11 @@ export default css`
   /* background-color:var(--button-disabled); */
   color:var(--text-on-color-disabled);
 }
+.spectric-button.spectric-button--primary:disabled{
+
+  background-color:var(--button-disabled);
+
+}
 .spectric-button:disabled .animation , :host(:disabled:hover) .animation{
 background-color: rgba(0, 0, 0, 0);
 opacity:1

package/src/components/index.ts

@@ -9,4 +9,5 @@ export * from "./ThemeProvider"
 export * from "./dialog"
 export * from "./splitview"
 export * from "./pagination"
-export * from "./table"
+export * from "./table"
+export * from "./tooltip"

package/src/components/input.css

@@ -68,8 +68,13 @@ spectric-input #helper-text {
     height: 18px;
 }
 
-spectric-input spectric-button {
+spectric-input[variant="password"] spectric-button {
     position: absolute;
     right: 4px;
     bottom: 3px;
+}
+
+spectric-input .checkbox{
+    display: flex;
+    justify-self: center;
 }

package/src/components/input.ts

@@ -3,6 +3,7 @@ import "./input.css"
 import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { ReactElementWithPropsAndEvents } from './types';
+import { ButtonSizesTypes } from './Button';
 
 export enum InputVariants {
   Text = 'text',
@@ -16,6 +17,7 @@ export enum InputVariants {
   file = "file",//display drop area
   hidden = "hidden",//display drop area
   password = "password",
+  checkbox = "checkbox"
 
 }
 type InputVariantsTypes = `${InputVariants}`
@@ -73,6 +75,9 @@ export interface InputProps {
 }
 @customElement('spectric-input')
 export class SpectricInput extends LitElement implements InputProps {
+  @property({ type: Boolean, reflect: true })
+  checked?: boolean;
+  size?: ButtonSizesTypes;
   //static styles?: CSSResultGroup | undefined = style;
   protected createRenderRoot(): HTMLElement | DocumentFragment {
     return this
@@ -155,7 +160,7 @@ export class SpectricInput extends LitElement implements InputProps {
   @property({ reflect: true })
   autocomplete: HTMLInputElement['autocomplete'] = "";
   get selectionStart() {
-    if(!this._input){
+    if (!this._input) {
       return null
     }
     return this._input.selectionStart
@@ -187,20 +192,20 @@ export class SpectricInput extends LitElement implements InputProps {
     }
   }
   blur(): void {
-    if(this._input){
+    if (this._input) {
       this._input.blur()
     }
   }
   focus(options?: FocusOptions): void {
-    if(this._input){
+    if (this._input) {
       //Sometimes the input will get auto focused after a modal closes but the cursor isn't set. we need to blur then refocus to get the cursor
       this._input.blur()
       this._input.focus(options)
     }
   }
   setSelectionRange(start: number, end: number, direction: "forward" | "backward" | "none" = "none") {
-    if(!this._input){
-      return 
+    if (!this._input) {
+      return
     }
     this._input.setSelectionRange(start, end, direction)
   }
@@ -290,6 +295,22 @@ export class SpectricInput extends LitElement implements InputProps {
 
       case InputVariants.hidden:
         return html`<input type="hidden"></input>`
+
+      case InputVariants.checkbox:
+
+        return html`
+        <div class="checkbox">
+        <spectric-button @click=${() => {
+            this.checked = !this.checked;
+            this.value = Boolean(this.checked);
+            console.log(this.checked, this.value)
+            this.dispatchEvent(new Event("change", { bubbles: true }))
+          }} icon size=${this.size || "xxsmall"} variant=${this.checked ? "primary" : "secondary"}>${this.checked ? '✓' : "\u00A0"}</spectric-button>
+          ${this.invalid || this.helperText ? html`<spectric-tooltip text=${this.invalid || this.helperText}></spectric-tooltip>` : null}
+          ${this.label}
+        </div>
+        </label>
+        `
       default:
         break;
     }

package/src/components/pagination/pagination.ts

@@ -41,7 +41,7 @@ export class PaginationElement extends LitElement implements PaginationProps {
      * Size of the pagination buttons
      */
     @property({ type: String, reflect: true })
-    size: ButtonSizesTypes = "small"
+    size: ButtonSizesTypes = "xsmall"
     protected createRenderRoot(): HTMLElement | DocumentFragment {
         return this
     }
@@ -93,8 +93,8 @@ export class PaginationElement extends LitElement implements PaginationProps {
                     ${pageText}
                     </div>
                     <div>
-                    <spectric-button size=${this.size} ?disabled=${this.page === 1} @click=${this._handlePageDown}><</spectric-button>
-                    <spectric-button size=${this.size} ?disabled=${nextPageDisabled} @click=${this._handlePageUp}>></spectric-button>
+                    <spectric-button size=${this.size} ?disabled=${this.page === 1} @click=${this._handlePageDown} icon><</spectric-button>
+                    <spectric-button size=${this.size} ?disabled=${nextPageDisabled} @click=${this._handlePageUp} icon>></spectric-button>
                     </div>
                 </div>
                 `: null}

package/src/components/query_bar/QueryBar.ts

@@ -39,7 +39,7 @@ export interface IQueryProps {
   /**
    * The output of the query in a specific format
    */
-  outputLanguage: SupportedLanguagesTypes;
+  outputLanguage?: SupportedLanguagesTypes;
   /**
    * The output of the query
    */
@@ -47,16 +47,16 @@ export interface IQueryProps {
   /**
    * Fields that are used for the auto complete
    */
-  fields: FieldTypes[];
+  fields?: FieldTypes[];
   /**
    * Callback that will provide values for specific fields
    */
-  getValuesForField: (field: string, text: string) => Promise<string[]>;
+  getValuesForField?: (field: string, text: string) => Promise<string[]>;
 
   /**
    * Input placeholder
    */
-  placeholder: string;
+  placeholder?: string;
 }
 type LabelValue = {
   label?: string;
@@ -133,7 +133,7 @@ export class SpectricQuery extends LitElement implements IQueryProps {
   protected _input!: SpectricInput;
   _parseQuery = (e: InputEvent | undefined = undefined) => {
     let ast;
-    if(e && e?.currentTarget && (e.currentTarget as HTMLInputElement).value){
+    if (e && e?.currentTarget && (e.currentTarget as HTMLInputElement).value) {
       this.value = (e.currentTarget as HTMLInputElement).value
     }
     if (this.value == "") {
@@ -293,7 +293,7 @@ export class SpectricQuery extends LitElement implements IQueryProps {
       let value = await completion.onSelect()
       if (value !== undefined) {
         this.value += value
-        setTimeout(()=>{this._input.focus();})
+        setTimeout(() => { this._input.focus(); })
       }
     }
     this.completionIndex = 0;

package/src/components/table/body.ts

@@ -12,7 +12,7 @@ interface BodyProps<T> {
 
 
 /**
- * Pagination Element
+ * Table Body Element
  */
 @customElement(TableBodyElementTag)
 export class TableBodyElement<T> extends LitElement implements BodyProps<T> {
@@ -29,7 +29,7 @@ export class TableBodyElement<T> extends LitElement implements BodyProps<T> {
         <body>
             ${this.data.map((row: any) => {
             return html`<tr>${this.columns.map(col => {
-                return html`<spectric-table-cell .column=${col} .row=${row}></spectric-table-cell>`
+                return html`<spectric-table-cell .column=${col} .row=${row} .columns=${this.columns}></spectric-table-cell>`
             })}</tr>`
         })}
         </body>

package/src/components/table/cell.ts

@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import { customElement, property, } from 'lit/decorators.js';
+import { html, LitElement, PropertyValues } from 'lit';
+import { customElement, property, query, } from 'lit/decorators.js';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 export const TableCellElementTag = "spectric-table-cell"
 import { ColumnSettings, TableElement } from './table';
@@ -25,14 +25,25 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
     row!: T;
     @property({ type: Object, attribute: false })
     column!: ColumnSettings<T>;
+    columns!: ColumnSettings<T>[];
     table!: TableElement<T>
+    styleRules: CSSStyleDeclaration;
+    @query("td")
+    td!: HTMLTableCellElement
+    constructor() {
+        super()
+        this.styleRules = document.createElement('span').style;
+    }
+    protected updated(_changedProperties: PropertyValues): void {
+        Object.assign(this.td.style, this.styleRules)
+    }
     protected createRenderRoot(): HTMLElement | DocumentFragment {
         return this
     }
     _handleFilterOut = () => {
         let value = undefined;
         if (this.column.key && typeof this.row === "object") {
-            value = (this.row as Record<any, any>)[this.column.key]
+            value = getValue(this.row as Record<any, any>, this.column.key)
         }
         this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter", {
             composed: true,
@@ -48,7 +59,7 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
     _handleFilterFor = () => {
         let value = undefined;
         if (this.column.key && typeof this.row === "object") {
-            value = (this.row as Record<any, any>)[this.column.key]
+            value = getValue(this.row as Record<any, any>, this.column.key)
         }
         this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter", {
             composed: true,
@@ -66,7 +77,8 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
         if (this.column.render) {
             rendered = this.column.render(this.row, this.table)
         } else if (this.column.key && typeof this.row === 'object') {
-            rendered = (this.row as Record<any, any>)[this.column.key]
+
+            rendered = getValue(this.row as any, this.column.key)
         } else {
             rendered = html`error`
         }
@@ -74,9 +86,14 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
         if (this.column.filterable) {
             classes.push("filterable")
         }
-        let filterButtons = html`<div class="table-cell-actions"><spectric-button @click=${this._handleFilterOut} size="tiny" variant="text" icon>-</spectric-button><spectric-button @click=${this._handleFilterFor} size="tiny" variant="text" icon>+</spectric-button></div>`
-
-
+        let filterButtons = html`<div class="table-cell-actions">
+            <spectric-button @click=${this._handleFilterOut} size="tiny" variant="text" icon tooltip="Filter Out Value">-</spectric-button>
+            <spectric-button @click=${this._handleFilterFor} size="tiny" variant="text" icon tooltip="Filter For Value">+</spectric-button></div>`
+        this.styleRules = {
+            ...this.styleRules,
+            width: this.column.width ? this.column.width + "px" : "",
+            whiteSpace: this.column.whiteSpace || ""
+        }
         return html`
             <td>
                 ${this.column.filterable ? filterButtons : null}
@@ -115,3 +132,13 @@ declare global {
         }
     }
 }
+
+
+const getValue = (context: Record<string, any>, key: string) => {
+    let path = key.split(".")
+    let value = context[path[0]]
+    if (path.length > 1) {
+        value = getValue(value, path.slice(1).join("."))
+    }
+    return value
+}

package/src/components/table/table.css

@@ -6,8 +6,12 @@ spectric-table tr{
     text-align: center;
 }
 
+spectric-table-body tr:hover{
+    background-color: color-mix(in srgb, var(--spectric-primary, #1ea7fd), transparent 70%)
+}
 spectric-table-header{
     display: table-header-group;
+    font-weight: bold;
 }
 spectric-table div[role="table"]{
     display: table;
@@ -17,12 +21,17 @@ spectric-table-body {
 }
 spectric-table-cell{
     display: contents;
+    vertical-align: middle;
 }
 spectric-table-cell td{
     position: relative;
 }
-spectric-table .filterable {
-    padding-top: 10px;
+
+spectric-table td:hover:has(.filterable) {
+    border: 1px solid var(--spectric-primary, #1ea7fd);
+}
+spectric-table td {
+    border: 1px solid transparent;
 }
 spectric-table-cell .table-cell-actions{
     position: absolute;
@@ -30,6 +39,7 @@ spectric-table-cell .table-cell-actions{
     width: 100%;
     flex-direction: row-reverse;
     visibility: hidden;
+    top: -10px;
 }
 spectric-table-cell td:hover .table-cell-actions{
     visibility: unset;

package/src/components/table/table.ts

@@ -2,7 +2,7 @@ import { html, LitElement, TemplateResult } from 'lit';
 import "../pagination";
 import "./header"
 import "./body"
-import { customElement, property, } from 'lit/decorators.js';
+import { customElement, property, state, } from 'lit/decorators.js';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 import "./table.css"
 export const TableElementTag = "spectric-table"
@@ -14,49 +14,30 @@ export type { TableProps, TableEvents }
 export type DomRenderable = HTMLElement | TemplateResult | string | number | null
 
 export type ColumnSettings<T> = {
+    width?: number
+    whiteSpace?: "nowrap";
     hidden?: boolean
     sortable?: boolean
     filterable?: boolean
-    title?: string
+    title?: DomRenderable
     key?: string
     render?: (row: T, table: TableElement<T>) => DomRenderable
 }
+type TableSelectOptions = "multi" | "single"
 interface TableProps<T> {
     pagination?: PaginationProps
     columns: ColumnSettings<T>[]
     data: T[]
+    select?: TableSelectOptions
 }
 
+type DomEvent<T> = Event & {
+    target: T
+}
 /**
- * Table Element
- * 
- * The table element is a bit more complex and the column settings and data can only be set through the properties
- * 
- * 
- * React
- * 
- * ``` tsx
- * <spectric-table data={[{col1:1}]} columns={[{key:"col1",}]} ></spectric-table>
- * ```
- * 
- * Javascript
- * 
- * ``` js
- * table = document.createElement("spectric-table")
- * table.data = [{col1:1}]
- * table.columns = [{key:"col1",}]
- * ```
+ * React example
+ * <iframe  width="100%" height="400px" src="https://stackblitz.com/edit/react-ts-2ue7azag?ctl=1&embed=1&file=App.tsx&hideExplorer=1&hideNavigation=1"/>
  * 
- * HTML 
- * 
- * ``` html
- * <spectric-table id="table"></spectric-table>
- * <script>
- * document.querySelector("#table")
- * table.data = [{col1:1}]
- * table.columns = [{key:"col1",}]
- * </script>
- * ```
  */
 @customElement(TableElementTag)
 export class TableElement<T> extends LitElement implements TableProps<T> {
@@ -66,6 +47,8 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
     pagination?: PaginationProps | undefined;
     @property({ attribute: false })
     columns: ColumnSettings<T>[] = [];
+    @property({ type: String, reflect: false })
+    select?: TableSelectOptions;
     private _handlePaginationChange = (e: CustomEvent<PaginationChangeProps>) => {
         e.preventDefault()
         e.stopPropagation()
@@ -84,12 +67,46 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
         //This is only here to document events that bubble up from lower components
         this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter"))
     }
+    @state()
+    selected: T[] = [];
     protected createRenderRoot(): HTMLElement | DocumentFragment {
         return this
     }
-
+    _handleSelectAllChange = (e: DomEvent<HTMLInputElement>) => {
+        e.stopPropagation()
+        if (e.target.checked) {
+            this.selected = [...this.data]
+        } else {
+            this.selected = []
+        }
+        this.dispatchEvent(new CustomEvent("select", { detail: this.selected }))
+    }
     protected render(): unknown {
         let columns = this.columns.filter(column => !column.hidden)
+        if (this.select) {
+            columns.unshift({
+                title: this.select === "multi" ? html`<spectric-input variant="checkbox" @change=${this._handleSelectAllChange} .helperText=${"Select All"}></spectric-input>` : null,
+                render: (row) => {
+                    return html`<spectric-input variant="checkbox" .checked=${this.selected.includes(row)} @change=${(e: DomEvent<HTMLInputElement>) => {
+                        e.stopPropagation()
+                        if (this.select === "single") {
+                            this.selected = []
+                        }
+                        if (e.target.checked) {
+                            this.selected.push(row)
+                            this.dispatchEvent(new CustomEvent("select", { detail: this.selected }))
+                        } else {
+                            let index = this.selected.findIndex(value => value === row)
+                            if (index !== -1) {
+                                this.selected.splice(index, 1)
+                                this.dispatchEvent(new CustomEvent("select", { detail: this.selected }))
+                            }
+                        }
+                    }}></spectric-input>`
+                }
+            })
+        }
+
         return html`
         <div role="table">
             <spectric-table-header .columns=${columns}></spectric-table-header>

package/src/components/tooltip/index.ts

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

package/src/components/tooltip/tooltip.css

@@ -0,0 +1,52 @@
+.spectric-tooltip-portal{
+    position: fixed;
+    z-index: 9999;
+    pointer-events: none;
+    --spectric-tooltip-background: color-mix(in srgb,var(--spectric-background-inverse,#f4f4f4) 100%,var(--spectric-primary,#1ea7fd) 90%)
+}
+.spectric-tooltip-portal .tooltip-container{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.spectric-tooltip-portal.top .tooltip-container{
+    flex-direction: column-reverse;
+}
+.spectric-tooltip-portal.bottom .tooltip-container{
+    flex-direction: column;
+}
+.spectric-tooltip-portal.left .tooltip-container{
+    flex-direction: row-reverse;
+}
+
+.spectric-tooltip-portal .tooltip-content{
+    background: var(--spectric-tooltip-background);
+    border-radius: var(--spectric-border-radius,.4em);
+    box-shadow: 0 0 .01em .01em color-mix(in srgb, var(--spectric-background-hover,rgba(141, 141, 141, 0.12)) 90%, var(--spectric-text-on-color,#ffffff) 90%);
+    padding: .2em;
+    color:var(--spectric-text-on-color,#ffffff);
+}
+
+.spectric-tooltip-portal .tooltip-caret{
+    background:var(--spectric-tooltip-background);
+}
+.spectric-tooltip-portal.top .tooltip-caret,.spectric-tooltip-portal.bottom .tooltip-caret{
+    inline-size: .75rem;
+    block-size: .374rem;
+}
+.spectric-tooltip-portal.left .tooltip-caret,.spectric-tooltip-portal.right .tooltip-caret{
+    inline-size: .375rem;
+    block-size: .75rem;
+}
+.spectric-tooltip-portal.top .tooltip-caret{
+    clip-path: polygon(0 0,50% 100%,100% 0);
+}
+.spectric-tooltip-portal.bottom .tooltip-caret{
+    clip-path: polygon(0 100%,50% 0,100% 100%);
+}
+.spectric-tooltip-portal.left .tooltip-caret{
+    clip-path: polygon(0 0,100% 50%,0 100%);
+}
+.spectric-tooltip-portal.right .tooltip-caret{
+    clip-path: polygon(0 50% ,100% 0, 100% 100%);
+}