@spectric/ui 0.0.17 → 0.0.19

package/dist/custom-elements.json

@@ -79,7 +79,7 @@
     },
     {
       "name": "spectric-button",
-      "description": "Events:\n\n  * `click` {`CustomEvent<MouseEvent>`} - \n\nAttributes:\n\n  * `variant` {`\"text\" | \"primary\" | \"secondary\"`} - Is this the principal call to action on the page?\n\n  * `backgroundColor` {`string | undefined`} - What background color to use\n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - How large should the button be?\n\n  * `label` {`string | undefined`} - \n\n  * `disabled` {`boolean`} - \n\n  * `danger` {`boolean`} - \n\n  * `icon` {`boolean`} - \n\n  * `tooltip` {`DomRenderable | undefined`} - \n\n  * `tooltipPosition` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\" | undefined`} - \n\nProperties:\n\n  * `styles` {`CSSResultGroup | undefined`} - \n\n  * `_onClick` - \n\n  * `variant` {`\"text\" | \"primary\" | \"secondary\"`} - Is this the principal call to action on the page?\n\n  * `backgroundColor` {`string | undefined`} - What background color to use\n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - How large should the button be?\n\n  * `label` {`string | undefined`} - \n\n  * `disabled` {`boolean`} - \n\n  * `danger` {`boolean`} - \n\n  * `icon` {`boolean`} - \n\n  * `tooltip` {`DomRenderable | undefined`} - \n\n  * `tooltipPosition` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\" | undefined`} - \n\n  * `_disposables` {`Set<IDisposable>`} - \n\n  * `_isDisposed` {`boolean`} - \n\n  * `_disposableListeners` {`{ target: DisposableTarget; event: string; handler: any; options?: AddEventListenerOptions | undefined; }[]`} - \n\n  * `_connected` {`boolean`} - ",
+      "description": "Attributes:\n\n  * `variant` {`\"text\" | \"primary\" | \"secondary\"`} - Is this the principal call to action on the page?\n\n  * `backgroundColor` {`string | undefined`} - What background color to use\n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - How large should the button be?\n\n  * `label` {`string | undefined`} - \n\n  * `disabled` {`boolean`} - \n\n  * `danger` {`boolean`} - \n\n  * `icon` {`boolean`} - \n\n  * `tooltip` {`DomRenderable | undefined`} - \n\n  * `tooltipPosition` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\" | undefined`} - \n\nProperties:\n\n  * `styles` {`CSSResultGroup | undefined`} - \n\n  * `_onClick` - \n\n  * `variant` {`\"text\" | \"primary\" | \"secondary\"`} - Is this the principal call to action on the page?\n\n  * `backgroundColor` {`string | undefined`} - What background color to use\n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - How large should the button be?\n\n  * `label` {`string | undefined`} - \n\n  * `disabled` {`boolean`} - \n\n  * `danger` {`boolean`} - \n\n  * `icon` {`boolean`} - \n\n  * `tooltip` {`DomRenderable | undefined`} - \n\n  * `tooltipPosition` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\" | undefined`} - \n\n  * `_disposables` {`Set<IDisposable>`} - \n\n  * `_isDisposed` {`boolean`} - \n\n  * `_disposableListeners` {`{ target: DisposableTarget; event: string; handler: any; options?: AddEventListenerOptions | undefined; }[]`} - \n\n  * `_connected` {`boolean`} - ",
       "attributes": [
         {
           "name": "variant",
@@ -170,10 +170,6 @@
               "name": "mouse"
             }
           ]
-        },
-        {
-          "name": "onclick",
-          "description": "`click` {`CustomEvent<MouseEvent>`} - "
         }
       ]
     },
@@ -348,15 +344,15 @@
     },
     {
       "name": "spectric-panel",
-      "description": "Spectric Panel visually seperates content areas and automatically adjusts the component colors that are nested inside.\n\nEvents:\n\n  * `use-layer` {`CustomEvent<{ layer: this; level: number; }>`} - \n\nAttributes:\n\n  * `level` {`number`} - Specify the layer level and override any existing levels based on hierarchy\n\nProperties:\n\n  * `styles` {`CSSResultGroup | undefined`} - \n\n  * `level` {`number`} - Specify the layer level and override any existing levels based on hierarchy\n\n  * `layers` {`NodeListOf<SpectricPanel> | undefined`} - ",
+      "description": "Spectric Panel visually seperates content areas and automatically adjusts the component colors that are nested inside.\n\nEvents:\n\n  * `layer-add` {`CustomEvent<{ layer: this; level: number; }>`} - \n\nAttributes:\n\n  * `level` {`number`} - Specify the layer level and override any existing levels based on hierarchy\n\nProperties:\n\n  * `styles` {`CSSResultGroup | undefined`} - \n\n  * `level` {`number`} - Specify the layer level and override any existing levels based on hierarchy\n\n  * `layers` {`NodeListOf<SpectricPanel> | undefined`} - \n\n  * `_disposables` {`Set<IDisposable>`} - \n\n  * `_isDisposed` {`boolean`} - \n\n  * `_disposableListeners` {`{ target: DisposableTarget; event: string; handler: any; options?: AddEventListenerOptions | undefined; }[]`} - \n\n  * `_connected` {`boolean`} - ",
       "attributes": [
         {
           "name": "level",
           "description": "`level` {`number`} - Specify the layer level and override any existing levels based on hierarchy\n\nProperty: level\n\nDefault: 0"
         },
         {
-          "name": "onuse-layer",
-          "description": "`use-layer` {`CustomEvent<{ layer: this; level: number; }>`} - "
+          "name": "onlayer-add",
+          "description": "`layer-add` {`CustomEvent<{ layer: this; level: number; }>`} - "
         }
       ]
     },
@@ -391,9 +387,29 @@
         }
       ]
     },
+    {
+      "name": "spectric-calendar",
+      "description": "Events:\n\n  * `select` {`CustomEvent<Date>`} - \n\nAttributes:\n\n  * `popup` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\nProperties:\n\n  * `calendarElement` {`Promise<HTMLDivElement>`} - \n\n  * `currentDate` {`string | number | Date | undefined`} - \n\n  * `date` {`Date`} - \n\n  * `popup` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `handleMouseMove` - \n\n  * `resetMouseMove` - \n\n  * `_disposables` {`Set<IDisposable>`} - \n\n  * `_isDisposed` {`boolean`} - \n\n  * `_disposableListeners` {`{ target: DisposableTarget; event: string; handler: any; options?: AddEventListenerOptions | undefined; }[]`} - \n\n  * `_connected` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "popup",
+          "description": "`popup` {`boolean`} - \n\nProperty: popup\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "disabled",
+          "description": "`disabled` {`boolean`} - \n\nProperty: disabled\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "onselect",
+          "description": "`select` {`CustomEvent<Date>`} - "
+        }
+      ]
+    },
     {
       "name": "spectric-colorpicker",
-      "description": "Attributes:\n\n  * `value` {`string`} - Color in hex\n\n  * `showAlpha` {`boolean`} - \n\nProperties:\n\n  * `hue` {`number`} - \n\n  * `alpha` {`number`} - \n\n  * `saturation` {`number`} - \n\n  * `lightness` {`number`} - \n\n  * `canvas` {`Ref<HTMLCanvasElement>`} - \n\n  * `original` {`string | undefined`} - \n\n  * `sldown` {`boolean`} - is mouse down on saturation/light canvas?\n\n  * `_handleSaturationLightnessClick` - \n\n  * `_handleHueChange` - \n\n  * `_handleAlphaChange` - \n\n  * `_handleApply` - \n\n  * `_cancel` - \n\n  * `_openPopover` - \n\n  * `value` {`string`} - Color in hex\n\n  * `showAlpha` {`boolean`} - ",
+      "description": "Events:\n\n  * `change` {`Event`} - \n\n  * `cancel` {`Event`} - \n\nAttributes:\n\n  * `value` {`string`} - Color in hex\n\n  * `showAlpha` {`boolean`} - \n\nProperties:\n\n  * `hue` {`number`} - \n\n  * `alpha` {`number`} - \n\n  * `saturation` {`number`} - \n\n  * `lightness` {`number`} - \n\n  * `canvas` {`Ref<HTMLCanvasElement>`} - \n\n  * `original` {`string | undefined`} - \n\n  * `sldown` {`boolean`} - is mouse down on saturation/light canvas?\n\n  * `_handleAlphaChange` - \n\n  * `_handleHueChange` - \n\n  * `_handleApply` - \n\n  * `_cancel` - \n\n  * `_handleSaturationLightnessClick` - \n\n  * `value` {`string`} - Color in hex\n\n  * `showAlpha` {`boolean`} - ",
       "attributes": [
         {
           "name": "value",
@@ -403,6 +419,14 @@
           "name": "showAlpha",
           "description": "`showAlpha` {`boolean`} - \n\nProperty: showAlpha\n\nDefault: true",
           "valueSet": "v"
+        },
+        {
+          "name": "onchange",
+          "description": "`change` {`Event`} - "
+        },
+        {
+          "name": "oncancel",
+          "description": "`cancel` {`Event`} - "
         }
       ]
     },
@@ -447,7 +471,7 @@
     },
     {
       "name": "spectric-input",
-      "description": "Events:\n\n  * `change` {`Event`} - \n\nAttributes:\n\n  * `checked` {`boolean | undefined`} - \n\n  * `hidePasswordLabel` {`string`} - \"Hide password\" tooltip text on password visibility toggle\n\n  * `showPasswordLabel` {`string`} - \"Show password\" tooltip text on password visibility toggle\n\n  * `value` {`string | number | boolean`} - The value of the input.\n\n  * `variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\" | \"range\"`} - Input type\n\n  * `label` {`string`} - Label to display above the input\n\n  * `placeholder` {`string`} - placeholder text to display\n\n  * `disabled` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `helperText` {`string`} - The helper text.\n\n  * `invalid` {`boolean`} - Specify if the currently value is invalid.\n\n  * `invalidText` {`string | TemplateResult<1> | undefined`} - Message which is displayed if the value is invalid.\n\n  * `maxCount` {`number`} - Max character count allowed for input. This is needed in order for enableCounter to display\n\n  * `required` {`boolean`} - Boolean property to set the required status\n\n  * `showPasswordVisibilityToggle` {`boolean`} - Boolean property to render password visibility toggle\n\n  * `name` {`string`} - Name for the input used for form data events //TODO make sure this works\n\n  * `pattern` {`string`} - Pattern to validate the input against for HTML validity checking\n\n  * `autocomplete` {`AutoFill`} - The sets the autocomplete for the input.\n\nProperties:\n\n  * `checked` {`boolean | undefined`} - \n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\" | undefined`} - \n\n  * `hidePasswordLabel` {`string`} - \"Hide password\" tooltip text on password visibility toggle\n\n  * `showPasswordLabel` {`string`} - \"Show password\" tooltip text on password visibility toggle\n\n  * `_value` {`string | number | boolean`} - The internal value.\n\n  * `_showPassword` {`boolean`} - \n\n  * `selectionStart` {`number | null`} - \n\n  * `value` {`string | number | boolean`} - The value of the input.\n\n  * `_handleInput` - Handles `oninput` event on the `<input>`.\n\n  * `_input` {`HTMLInputElement | undefined`} - The underlying input element\n\n  * `handleTogglePasswordVisibility` - \n\n  * `variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\" | \"range\"`} - Input type\n\n  * `label` {`string`} - Label to display above the input\n\n  * `placeholder` {`string`} - placeholder text to display\n\n  * `disabled` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `helperText` {`string`} - The helper text.\n\n  * `invalid` {`boolean`} - Specify if the currently value is invalid.\n\n  * `invalidText` {`string | TemplateResult<1> | undefined`} - Message which is displayed if the value is invalid.\n\n  * `maxCount` {`number`} - Max character count allowed for input. This is needed in order for enableCounter to display\n\n  * `required` {`boolean`} - Boolean property to set the required status\n\n  * `showPasswordVisibilityToggle` {`boolean`} - Boolean property to render password visibility toggle\n\n  * `name` {`string`} - Name for the input used for form data events //TODO make sure this works\n\n  * `pattern` {`string`} - Pattern to validate the input against for HTML validity checking\n\n  * `autocomplete` {`AutoFill`} - The sets the autocomplete for the input.",
+      "description": "Events:\n\n  * `change` {`Event`} - \n\nAttributes:\n\n  * `checked` {`boolean | undefined`} - \n\n  * `hidePasswordLabel` {`string`} - \"Hide password\" tooltip text on password visibility toggle\n\n  * `showPasswordLabel` {`string`} - \"Show password\" tooltip text on password visibility toggle\n\n  * `value` {`string | number | boolean`} - The value of the input.\n\n  * `variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"popup-date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\" | \"range\"`} - Input type\n\n  * `label` {`string`} - Label to display above the input\n\n  * `placeholder` {`string`} - placeholder text to display\n\n  * `disabled` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `helperText` {`string`} - The helper text.\n\n  * `invalid` {`boolean`} - Specify if the currently value is invalid.\n\n  * `invalidText` {`string | TemplateResult<1> | undefined`} - Message which is displayed if the value is invalid.\n\n  * `maxCount` {`number`} - Max character count allowed for input. This is needed in order for enableCounter to display\n\n  * `required` {`boolean`} - Boolean property to set the required status\n\n  * `showPasswordVisibilityToggle` {`boolean`} - Boolean property to render password visibility toggle\n\n  * `name` {`string`} - Name for the input used for form data events //TODO make sure this works\n\n  * `pattern` {`string`} - Pattern to validate the input against for HTML validity checking\n\n  * `autocomplete` {`AutoFill`} - The sets the autocomplete for the input.\n\nProperties:\n\n  * `checked` {`boolean | undefined`} - \n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\" | undefined`} - \n\n  * `files` {`FileList | null`} - \n\n  * `hidePasswordLabel` {`string`} - \"Hide password\" tooltip text on password visibility toggle\n\n  * `showPasswordLabel` {`string`} - \"Show password\" tooltip text on password visibility toggle\n\n  * `_value` {`string | number | boolean`} - The internal value.\n\n  * `_showPassword` {`boolean`} - \n\n  * `selectionStart` {`number | null`} - \n\n  * `value` {`string | number | boolean`} - The value of the input.\n\n  * `_handleInput` - Handles `oninput` event on the `<input>`.\n\n  * `_input` {`HTMLInputElement | undefined`} - The underlying input element\n\n  * `handleTogglePasswordVisibility` - \n\n  * `variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"popup-date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\" | \"range\"`} - Input type\n\n  * `label` {`string`} - Label to display above the input\n\n  * `placeholder` {`string`} - placeholder text to display\n\n  * `disabled` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `helperText` {`string`} - The helper text.\n\n  * `invalid` {`boolean`} - Specify if the currently value is invalid.\n\n  * `invalidText` {`string | TemplateResult<1> | undefined`} - Message which is displayed if the value is invalid.\n\n  * `maxCount` {`number`} - Max character count allowed for input. This is needed in order for enableCounter to display\n\n  * `required` {`boolean`} - Boolean property to set the required status\n\n  * `showPasswordVisibilityToggle` {`boolean`} - Boolean property to render password visibility toggle\n\n  * `name` {`string`} - Name for the input used for form data events //TODO make sure this works\n\n  * `pattern` {`string`} - Pattern to validate the input against for HTML validity checking\n\n  * `autocomplete` {`AutoFill`} - The sets the autocomplete for the input.",
       "attributes": [
         {
           "name": "checked",
@@ -469,7 +493,7 @@
         },
         {
           "name": "variant",
-          "description": "`variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\" | \"range\"`} - Input type\n\nProperty: variant\n\nDefault: text",
+          "description": "`variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"popup-date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\" | \"range\"`} - Input type\n\nProperty: variant\n\nDefault: text",
           "values": [
             {
               "name": "number"
@@ -486,6 +510,9 @@
             {
               "name": "date"
             },
+            {
+              "name": "popup-date"
+            },
             {
               "name": "datetime-local"
             },
@@ -1933,7 +1960,7 @@
     },
     {
       "name": "spectric-query",
-      "description": "The Query component will take Opensearch Dashboard Query language and transform it into various outputs\n\nEvents:\n\n  * `change` {`CustomEvent<any>`} - \n\nAttributes:\n\n  * `outputLanguage` {`\"toMongo\" | \"toCql\" | \"toDSL\" | \"AST\"`} - The output of the query in a specific format\n\n  * `value` {`string`} - The value of the input.\n\n  * `fields` {`FieldTypes[]`} - Fields that are used for the auto complete\n\n  * `placeholder` {`string`} - Input placeholder\n\nProperties:\n\n  * `_value` {`string`} - The internal value.\n\n  * `suggestion` {`Suggestion | undefined`} - \n\n  * `completions` {`Completion[]`} - \n\n  * `completionIndex` {`number`} - \n\n  * `_autocomplete` {`HTMLDivElement | undefined`} - \n\n  * `_asyncAutocomplete` {`Promise<HTMLDivElement>`} - \n\n  * `_input` {`SpectricInput`} - The underlying input element\n\n  * `_parseQuery` - \n\n  * `_selectCompletion` - \n\n  * `_handleArrows` - \n\n  * `uuid` {`string`} - \n\n  * `outputLanguage` {`\"toMongo\" | \"toCql\" | \"toDSL\" | \"AST\"`} - The output of the query in a specific format\n\n  * `value` {`string`} - The value of the input.\n\n  * `fields` {`FieldTypes[]`} - Fields that are used for the auto complete\n\n  * `getValuesForField` - Callback that will provide values for specific fields\n\n  * `placeholder` {`string`} - Input placeholder",
+      "description": "The Query component will take Opensearch Dashboard Query language and transform it into various outputs\n\nEvents:\n\n  * `change` {`CustomEvent<any>`} - \n\nAttributes:\n\n  * `outputLanguage` {`\"toMongo\" | \"toCql\" | \"toDSL\" | \"AST\"`} - The output of the query in a specific format\n\n  * `value` {`string`} - The value of the input.\n\n  * `fields` {`FieldTypes[]`} - Fields that are used for the auto complete\n\n  * `placeholder` {`string`} - Input placeholder\n\nProperties:\n\n  * `_value` {`string`} - The internal value.\n\n  * `suggestion` {`Suggestion | undefined`} - \n\n  * `completions` {`Completion[]`} - \n\n  * `completionIndex` {`number`} - \n\n  * `_autocomplete` {`PopoverElement | undefined`} - \n\n  * `_asyncAutocomplete` {`Promise<HTMLDivElement>`} - \n\n  * `_input` {`SpectricInput`} - The underlying input element\n\n  * `_parseQuery` - \n\n  * `_selectCompletion` - \n\n  * `_handleArrows` - \n\n  * `uuid` {`string`} - \n\n  * `outputLanguage` {`\"toMongo\" | \"toCql\" | \"toDSL\" | \"AST\"`} - The output of the query in a specific format\n\n  * `value` {`string`} - The value of the input.\n\n  * `fields` {`FieldTypes[]`} - Fields that are used for the auto complete\n\n  * `getValuesForField` - Callback that will provide values for specific fields\n\n  * `placeholder` {`string`} - Input placeholder",
       "attributes": [
         {
           "name": "outputLanguage",
@@ -2112,7 +2139,7 @@
     },
     {
       "name": "spectric-table-virtual-body",
-      "description": "Table Body Element\n\nAttributes:\n\n  * `startIndex` {`number`} - \n\nProperties:\n\n  * `startIndex` {`number`} - \n\n  * `table` {`SpectricTableElement<T>`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - \n\n  * `data` {`T[]`} - \n\n  * `rowHeight` {`number`} - \n\n  * `_disposables` {`Set<IDisposable>`} - \n\n  * `_isDisposed` {`boolean`} - \n\n  * `_disposableListeners` {`{ target: DisposableTarget; event: string; handler: any; options?: AddEventListenerOptions | undefined; }[]`} - \n\n  * `_connected` {`boolean`} - ",
+      "description": "Table Body Element\n\nAttributes:\n\n  * `startIndex` {`number`} - \n\nProperties:\n\n  * `startIndex` {`number`} - \n\n  * `table` {`SpectricTableElement<T>`} - \n\n  * `columnsMeasured` {`boolean`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - \n\n  * `data` {`T[]`} - \n\n  * `rowHeight` {`number`} - \n\n  * `_disposables` {`Set<IDisposable>`} - \n\n  * `_isDisposed` {`boolean`} - \n\n  * `_disposableListeners` {`{ target: DisposableTarget; event: string; handler: any; options?: AddEventListenerOptions | undefined; }[]`} - \n\n  * `_connected` {`boolean`} - ",
       "attributes": [
         {
           "name": "startIndex",
@@ -2122,7 +2149,7 @@
     },
     {
       "name": "spectric-popover",
-      "description": "Spectric tooltip will add a tooltip to any container\n\nAttributes:\n\n  * `delay` {`number`} - How long you need to hover before the tooltip displays\n\n  * `animationDuration` {`number`} - How long the fade in animation should run\n\n  * `text` {`DomRenderable`} - Tooltip contents\n\n  * `position` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\"`} - Where to anchor the tooltip\n\n  * `maxWidth` {`number | undefined`} - Sets a max width for the contents you can disable this by setting to 0 or -1\n\nProperties:\n\n  * `portalElement` {`HTMLDivElement`} - \n\n  * `mouseLocation` {`{ left: number; top: number; } | undefined`} - \n\n  * `styles` {`CSSResultGroup | undefined`} - \n\n  * `timer` {`number | undefined`} - \n\n  * `open` {`boolean`} - \n\n  * `mouseframe` {`number | undefined`} - \n\n  * `target` {`HTMLElement`} - \n\n  * `_getMousePosition` - \n\n  * `applyStyle` - \n\n  * `positionTooltip` - \n\n  * `showPopover` - Public method to trigger showing the tooltip programatically\n\n  * `hidePopover` - \n\n  * `delay` {`number`} - How long you need to hover before the tooltip displays\n\n  * `animationDuration` {`number`} - How long the fade in animation should run\n\n  * `text` {`DomRenderable`} - Tooltip contents\n\n  * `position` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\"`} - Where to anchor the tooltip\n\n  * `maxWidth` {`number | undefined`} - Sets a max width for the contents you can disable this by setting to 0 or -1\n\n  * `portalTarget` {`HTMLElement`} - Container the tool tip will be attached to.\n\n  * `triggerTarget` {`HTMLElement`} - The element that triggers the tooltip. This is used for special cases like in the shadow dom if you want to target a host element instead of the immediate parent element\n\n  * `_disposables` {`Set<IDisposable>`} - \n\n  * `_isDisposed` {`boolean`} - \n\n  * `_disposableListeners` {`{ target: DisposableTarget; event: string; handler: any; options?: AddEventListenerOptions | undefined; }[]`} - \n\n  * `_connected` {`boolean`} - ",
+      "description": "Spectric tooltip will add a tooltip to any container\n\nAttributes:\n\n  * `delay` {`number`} - How long you need to hover before the tooltip displays\n\n  * `animationDuration` {`number`} - How long the fade in animation should run\n\n  * `text` {`DomRenderable`} - Tooltip contents\n\n  * `position` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\"`} - Where to anchor the tooltip\n\n  * `maxWidth` {`number | undefined`} - Sets a max width for the contents you can disable this by setting to 0 or -1\n\n  * `mouseOffsetX` {`number`} - \n\n  * `mouseOffsetY` {`number`} - \n\nProperties:\n\n  * `portalElement` {`HTMLDivElement`} - \n\n  * `mouseLocation` {`{ left: number; top: number; } | undefined`} - \n\n  * `styles` {`CSSResultGroup | undefined`} - \n\n  * `timer` {`number | undefined`} - \n\n  * `open` {`boolean`} - \n\n  * `mouseframe` {`number | undefined`} - \n\n  * `target` {`HTMLElement`} - \n\n  * `_getMousePosition` - \n\n  * `applyStyle` - \n\n  * `positionTooltip` - \n\n  * `showPopover` - Public method to trigger showing the tooltip programatically\n\n  * `hidePopover` - \n\n  * `delay` {`number`} - How long you need to hover before the tooltip displays\n\n  * `animationDuration` {`number`} - How long the fade in animation should run\n\n  * `text` {`DomRenderable`} - Tooltip contents\n\n  * `position` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\"`} - Where to anchor the tooltip\n\n  * `maxWidth` {`number | undefined`} - Sets a max width for the contents you can disable this by setting to 0 or -1\n\n  * `portalTarget` {`HTMLElement`} - Container the tool tip will be attached to.\n\n  * `triggerTarget` {`HTMLElement`} - The element that triggers the tooltip. This is used for special cases like in the shadow dom if you want to target a host element instead of the immediate parent element\n\n  * `mouseOffsetX` {`number`} - \n\n  * `mouseOffsetY` {`number`} - \n\n  * `_disposables` {`Set<IDisposable>`} - \n\n  * `_isDisposed` {`boolean`} - \n\n  * `_disposableListeners` {`{ target: DisposableTarget; event: string; handler: any; options?: AddEventListenerOptions | undefined; }[]`} - \n\n  * `_connected` {`boolean`} - ",
       "attributes": [
         {
           "name": "delay",
@@ -2162,12 +2189,20 @@
           "name": "maxWidth",
           "description": "`maxWidth` {`number | undefined`} - Sets a max width for the contents you can disable this by setting to 0 or -1\n\nProperty: maxWidth\n\nDefault: 300",
           "values": []
+        },
+        {
+          "name": "mouseOffsetX",
+          "description": "`mouseOffsetX` {`number`} - \n\nProperty: mouseOffsetX\n\nDefault: 10"
+        },
+        {
+          "name": "mouseOffsetY",
+          "description": "`mouseOffsetY` {`number`} - \n\nProperty: mouseOffsetY\n\nDefault: 0"
         }
       ]
     },
     {
       "name": "spectric-tooltip",
-      "description": "Spectric tooltip will add a tooltip to any container\n\nAttributes:\n\n  * `delay` {`number`} - How long you need to hover before the tooltip displays\n\n  * `animationDuration` {`number`} - How long the fade in animation should run\n\n  * `text` {`DomRenderable`} - Tooltip contents\n\n  * `position` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\"`} - Where to anchor the tooltip\n\n  * `maxWidth` {`number | undefined`} - Sets a max width for the contents you can disable this by setting to 0 or -1\n\nProperties:\n\n  * `portalElement` {`HTMLDivElement`} - \n\n  * `mouseLocation` {`{ left: number; top: number; } | undefined`} - \n\n  * `styles` {`CSSResultGroup | undefined`} - \n\n  * `timer` {`number | undefined`} - \n\n  * `open` {`boolean`} - \n\n  * `mouseframe` {`number | undefined`} - \n\n  * `target` {`HTMLElement`} - \n\n  * `_getMousePosition` - \n\n  * `applyStyle` - \n\n  * `positionTooltip` - \n\n  * `showPopover` - Public method to trigger showing the tooltip programatically\n\n  * `hidePopover` - \n\n  * `delay` {`number`} - How long you need to hover before the tooltip displays\n\n  * `animationDuration` {`number`} - How long the fade in animation should run\n\n  * `text` {`DomRenderable`} - Tooltip contents\n\n  * `position` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\"`} - Where to anchor the tooltip\n\n  * `maxWidth` {`number | undefined`} - Sets a max width for the contents you can disable this by setting to 0 or -1\n\n  * `portalTarget` {`HTMLElement`} - Container the tool tip will be attached to.\n\n  * `triggerTarget` {`HTMLElement`} - The element that triggers the tooltip. This is used for special cases like in the shadow dom if you want to target a host element instead of the immediate parent element\n\n  * `_disposables` {`Set<IDisposable>`} - \n\n  * `_isDisposed` {`boolean`} - \n\n  * `_disposableListeners` {`{ target: DisposableTarget; event: string; handler: any; options?: AddEventListenerOptions | undefined; }[]`} - \n\n  * `_connected` {`boolean`} - ",
+      "description": "Spectric tooltip will add a tooltip to any container\n\nAttributes:\n\n  * `delay` {`number`} - How long you need to hover before the tooltip displays\n\n  * `animationDuration` {`number`} - How long the fade in animation should run\n\n  * `text` {`DomRenderable`} - Tooltip contents\n\n  * `position` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\"`} - Where to anchor the tooltip\n\n  * `maxWidth` {`number | undefined`} - Sets a max width for the contents you can disable this by setting to 0 or -1\n\n  * `mouseOffsetX` {`number | undefined`} - \n\n  * `mouseOffsetY` {`number | undefined`} - \n\nProperties:\n\n  * `showToolTip` - \n\n  * `portalElement` {`HTMLDivElement`} - \n\n  * `mouseLocation` {`{ left: number; top: number; } | undefined`} - \n\n  * `styles` {`CSSResultGroup | undefined`} - \n\n  * `timer` {`number | undefined`} - \n\n  * `open` {`boolean`} - \n\n  * `mouseframe` {`number | undefined`} - \n\n  * `target` {`HTMLElement`} - \n\n  * `_getMousePosition` - \n\n  * `applyStyle` - \n\n  * `positionTooltip` - \n\n  * `showPopover` - Public method to trigger showing the tooltip programatically\n\n  * `hidePopover` - \n\n  * `delay` {`number`} - How long you need to hover before the tooltip displays\n\n  * `animationDuration` {`number`} - How long the fade in animation should run\n\n  * `text` {`DomRenderable`} - Tooltip contents\n\n  * `position` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\"`} - Where to anchor the tooltip\n\n  * `maxWidth` {`number | undefined`} - Sets a max width for the contents you can disable this by setting to 0 or -1\n\n  * `portalTarget` {`HTMLElement`} - Container the tool tip will be attached to.\n\n  * `triggerTarget` {`HTMLElement`} - The element that triggers the tooltip. This is used for special cases like in the shadow dom if you want to target a host element instead of the immediate parent element\n\n  * `mouseOffsetX` {`number | undefined`} - \n\n  * `mouseOffsetY` {`number | undefined`} - \n\n  * `_disposables` {`Set<IDisposable>`} - \n\n  * `_isDisposed` {`boolean`} - \n\n  * `_disposableListeners` {`{ target: DisposableTarget; event: string; handler: any; options?: AddEventListenerOptions | undefined; }[]`} - \n\n  * `_connected` {`boolean`} - ",
       "attributes": [
         {
           "name": "delay",
@@ -2207,6 +2242,16 @@
           "name": "maxWidth",
           "description": "`maxWidth` {`number | undefined`} - Sets a max width for the contents you can disable this by setting to 0 or -1\n\nProperty: maxWidth\n\nDefault: 300",
           "values": []
+        },
+        {
+          "name": "mouseOffsetX",
+          "description": "`mouseOffsetX` {`number | undefined`} - \n\nProperty: mouseOffsetX\n\nDefault: 10",
+          "values": []
+        },
+        {
+          "name": "mouseOffsetY",
+          "description": "`mouseOffsetY` {`number | undefined`} - \n\nProperty: mouseOffsetY\n\nDefault: 0",
+          "values": []
         }
       ]
     },

package/dist/index.d.ts

@@ -26,6 +26,7 @@ declare const module: {
         control: "color" | "text";
     }>;
     ThemeSelections: { [k in "undefined" | "light" | "dark" | "spectric" | "spectricFlat"]: k; };
+    SPECTRIC_CSS_VARIABLES: string[];
     SpectricThemeProvider: typeof components.SpectricThemeProvider;
     DialogElementTag: "spectric-dialog";
     DialogElement: typeof components.DialogElement;
@@ -38,10 +39,12 @@ declare const module: {
     TableSelectOptions: typeof components.TableSelectOptions;
     TableSortOption: typeof components.TableSortOption;
     TableSortDirection: typeof components.TableSortDirection;
+    TD_BorderAndPadding: 4;
     SpectricTableElement: typeof components.SpectricTableElement;
     TooltipElementTag: "spectric-tooltip";
     TooltipPostions: typeof components.TooltipPostions;
     TooltipElement: typeof components.TooltipElement;
+    SpectricCalendar: typeof components.SpectricCalendar;
     BitArray: {
         new (buf: ArrayBuffer): {
             buffer: ArrayBuffer;