@oicl/openbridge-webcomponents 0.0.4

package/dist/components/toggle-button-option/toggle-button-option.css.js

@@ -0,0 +1,142 @@
+import { css } from "lit";
+const comonentStyle = css`:host {
+  flex: 1;
+}
+
+.wrapper {
+  height: 32px;
+  width: 100%;
+  padding: 0;
+  display: flex;
+  position: relative;
+  margin: -1px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+}
+
+.wrapper {
+  border-color: var(--flat-enabled-border-color);
+  background-color: var(--flat-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
+}
+
+.wrapper:focus {
+  outline: none;
+}
+
+.wrapper.activated {
+  border-color: var(--flat-activated-border-color);
+  background-color: var(--flat-activated-background-color);
+}
+
+.wrapper:focus-visible {
+  outline-color: hsla(211, 100%, 44%, 0.3);
+  outline-width: 4px;
+  outline-style: solid;
+}
+
+.wrapper:hover {
+  border-color: var(--flat-hover-border-color);
+  background-color: var(--flat-hover-background-color);
+}
+
+.wrapper:active {
+  border-color: var(--flat-pressed-border-color);
+  background-color: var(--flat-pressed-background-color);
+}
+
+.wrapper:disabled {
+  border-color: var(--flat-disabled-border-color);
+  background-color: var(--flat-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-flat-disabled-color);
+}
+
+.icon {
+  width: 24px;
+  height: 24px;
+  color: var(--on-flat-neutral-color, hsla(0, 0%, 0%, 0.55));
+}
+
+.label {
+  position: absolute;
+  top: 36px;
+  left: 0;
+  right: 0;
+
+  color: var(--element-active-color, #1a1a1a);
+  text-align: center;
+    
+  font-family: 'Noto Sans';
+    
+  font-size: 12px;
+    
+  font-style: normal;
+    
+  font-weight: 370;
+    
+  line-height: 16px;
+    
+  /* 133.333% */
+}
+
+.wrapper.selected {
+  border-color: var(--selected-enabled-border-color);
+  background-color: var(--selected-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
+}
+
+.wrapper.selected:focus {
+  outline: none;
+}
+
+.wrapper.selected.activated {
+  border-color: var(--selected-activated-border-color);
+  background-color: var(--selected-activated-background-color);
+}
+
+.wrapper.selected:focus-visible {
+  outline-color: hsla(211, 100%, 44%, 0.3);
+  outline-width: 4px;
+  outline-style: solid;
+}
+
+.wrapper.selected:hover {
+  border-color: var(--selected-hover-border-color);
+  background-color: var(--selected-hover-background-color);
+}
+
+.wrapper.selected:active {
+  border-color: var(--selected-pressed-border-color);
+  background-color: var(--selected-pressed-background-color);
+}
+
+.wrapper.selected:disabled {
+  border-color: var(--selected-disabled-border-color);
+  background-color: var(--selected-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-selected-disabled-color);
+}
+
+.wrapper.selected .icon {
+    color: var(--on-selected-active-color, #FFFFFF);
+  }
+
+.wrapper.selected .label {
+    font-family: 'Noto Sans';
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 650;
+    line-height: 16px;
+    /* 133.333% */
+  }
+`;
+export {
+  comonentStyle as default
+};
+//# sourceMappingURL=toggle-button-option.css.js.map

package/dist/components/toggle-button-option/toggle-button-option.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button-option.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/toggle-button-option/toggle-button-option.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+export declare class ObcToggleButtonOption extends LitElement {
+    value: string;
+    selected: boolean;
+    onClick(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-toggle-button-option': ObcToggleButtonOption;
+    }
+}
+//# sourceMappingURL=toggle-button-option.d.ts.map

package/dist/components/toggle-button-option/toggle-button-option.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button-option.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-button-option/toggle-button-option.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,qBACa,qBAAsB,SAAQ,UAAU;IACzB,KAAK,SAAW;IACf,QAAQ,UAAS;IAE5C,OAAO;IAME,MAAM;IAcf,OAAgB,MAAM,0BAA4B;CACnD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,0BAA0B,EAAE,qBAAqB,CAAC;KACnD;CACF"}

package/dist/components/toggle-button-option/toggle-button-option.js

@@ -0,0 +1,54 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import comonentStyle from "./toggle-button-option.css.js";
+import { classMap } from "lit/directives/class-map.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let ObcToggleButtonOption = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = "value";
+    this.selected = false;
+  }
+  onClick() {
+    this.dispatchEvent(
+      new CustomEvent("selected", { detail: { value: this.value } })
+    );
+  }
+  render() {
+    return html`
+      <button
+        class=${classMap({ wrapper: true, selected: this.selected })}
+        @click=${this.onClick}
+      >
+        <div class="icon">
+          <slot name="icon"> </slot>
+        </div>
+        <div class="label"><slot></slot></div>
+      </button>
+    `;
+  }
+};
+ObcToggleButtonOption.styles = unsafeCSS(comonentStyle);
+__decorateClass([
+  property({ type: String })
+], ObcToggleButtonOption.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcToggleButtonOption.prototype, "selected", 2);
+ObcToggleButtonOption = __decorateClass([
+  customElement("obc-toggle-button-option")
+], ObcToggleButtonOption);
+export {
+  ObcToggleButtonOption
+};
+//# sourceMappingURL=toggle-button-option.js.map

package/dist/components/toggle-button-option/toggle-button-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button-option.js","sources":["../../../src/components/toggle-button-option/toggle-button-option.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport comonentStyle from './toggle-button-option.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\n\n@customElement('obc-toggle-button-option')\nexport class ObcToggleButtonOption extends LitElement {\n  @property({type: String}) value = 'value';\n  @property({type: Boolean}) selected = false;\n\n  onClick() {\n    this.dispatchEvent(\n      new CustomEvent('selected', {detail: {value: this.value}})\n    );\n  }\n\n  override render() {\n    return html`\n      <button\n        class=${classMap({wrapper: true, selected: this.selected})}\n        @click=${this.onClick}\n      >\n        <div class=\"icon\">\n          <slot name=\"icon\"> </slot>\n        </div>\n        <div class=\"label\"><slot></slot></div>\n      </button>\n    `;\n  }\n\n  static override styles = unsafeCSS(comonentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-toggle-button-option': ObcToggleButtonOption;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAMa,IAAA,wBAAN,cAAoC,WAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA;AAC6B,SAAA,QAAA;AACI,SAAA,WAAA;AAAA,EAAA;AAAA,EAEtC,UAAU;AACH,SAAA;AAAA,MACH,IAAI,YAAY,YAAY,EAAC,QAAQ,EAAC,OAAO,KAAK,MAAK,GAAE;AAAA,IAAA;AAAA,EAE7D;AAAA,EAES,SAAS;AACT,WAAA;AAAA;AAAA,gBAEK,SAAS,EAAC,SAAS,MAAM,UAAU,KAAK,SAAA,CAAS,CAAC;AAAA,iBACjD,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ3B;AAGF;AAzBa,sBAwBK,SAAS,UAAU,aAAa;AAvBtB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,sBACe,WAAA,SAAA,CAAA;AACC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GAFd,sBAEgB,WAAA,YAAA,CAAA;AAFhB,wBAAN,gBAAA;AAAA,EADN,cAAc,0BAA0B;AAAA,GAC5B,qBAAA;"}

package/dist/components/toggle-switch/toggle-switch.css.js

@@ -0,0 +1,133 @@
+import { css } from "lit";
+const componentStyle = css`label {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  height: 48px;
+
+  color: var(--element-active-color, #1a1a1a);
+
+  /* UI/Body */
+
+  font-family: 'Noto Sans';
+
+  font-size: 16px;
+
+  font-style: normal;
+
+  font-weight: 370;
+
+  line-height: 24px;
+
+  /* 150% */
+
+  text-decoration: none;
+}
+
+input {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  top: 0; /* (48px-24px)/2= (height of the input - height of the presenter) / 2 */
+  bottom: 0;
+  right: -1px;
+  left: -1px;
+  opacity: 1;
+  margin: auto;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.presenter {
+  box-sizing: border-box;
+  width: 48px;
+  height: 24px;
+
+  background: var(--indent-enabled-background-color, rgba(0, 0, 0, 0.05));
+  border: solid 1px var(--element-inactive-color, rgba(0, 0, 0, 0.42));
+  border-radius: 12px;
+
+  display: flex;
+  position: relative;
+  align-items: center;
+
+  padding: 6px;
+}
+
+.presenter:hover {
+    background: var(--indent-hover-background-color, rgba(0, 0, 0, 0.1));
+  }
+
+.presenter:active {
+    background: var(--indent-pressed-background-color, rgba(0, 0, 0, 0.16));
+  }
+
+.presenter:has(:focus-visible) {
+    border-width: 0;
+    outline-color: var(--indent-focused-border-color, rgba(0, 110, 225, 0.3));
+    outline-width: 4px;
+    outline-style: solid;
+  }
+
+.presenter.checked {
+    justify-content: flex-end;
+  }
+
+.presenter.checked {
+  border-color: var(--selected-enabled-border-color);
+  background-color: var(--selected-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
+}
+
+.presenter.checked:focus {
+  outline: none;
+}
+
+.presenter.checked.activated {
+  border-color: var(--selected-activated-border-color);
+  background-color: var(--selected-activated-background-color);
+}
+
+.presenter.checked:focus-visible {
+  outline-color: hsla(211, 100%, 44%, 0.3);
+  outline-width: 4px;
+  outline-style: solid;
+}
+
+.presenter.checked:hover {
+  border-color: var(--selected-hover-border-color);
+  background-color: var(--selected-hover-background-color);
+}
+
+.presenter.checked:active {
+  border-color: var(--selected-pressed-border-color);
+  background-color: var(--selected-pressed-background-color);
+}
+
+.presenter.checked:disabled {
+  border-color: var(--selected-disabled-border-color);
+  background-color: var(--selected-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-selected-disabled-color);
+}
+
+.knob {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+
+  background: var(--element-neutral-color, rgba(0, 0, 0, 0.59));
+}
+
+.checked .knob {
+    background: var(--on-selected-active-color, #fff);
+  }
+`;
+export {
+  componentStyle as default
+};
+//# sourceMappingURL=toggle-switch.css.js.map

package/dist/components/toggle-switch/toggle-switch.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-switch.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/toggle-switch/toggle-switch.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+import '../icon-button/icon-button';
+export declare class ObcToggleSwitch extends LitElement {
+    label: string;
+    checked: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    _tryChange(): void;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-toggle-switch': ObcToggleSwitch;
+    }
+}
+//# sourceMappingURL=toggle-switch.d.ts.map

package/dist/components/toggle-switch/toggle-switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-switch.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/toggle-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGhD,OAAO,4BAA4B,CAAC;AAGpC,qBACa,eAAgB,SAAQ,UAAU;IACnB,KAAK,SAAW;IACf,OAAO,UAAS;IAElC,MAAM;IAkBf,UAAU;IAIV,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/components/toggle-switch/toggle-switch.js

@@ -0,0 +1,57 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import "../icon-button/icon-button.js";
+import componentStyle from "./toggle-switch.css.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let ObcToggleSwitch = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.label = "Label";
+    this.checked = false;
+  }
+  render() {
+    return html`
+      <label>
+        <span>${this.label}</span>
+        <div class="switch">
+          <div class="presenter ${classMap({ checked: this.checked })}">
+            <div class="knob"></div>
+            <input
+              type="checkbox"
+              ?checked=${this.checked}
+              @click=${this._tryChange}
+            />
+          </div>
+        </div>
+      </label>
+    `;
+  }
+  _tryChange() {
+    this.checked = !this.checked;
+  }
+};
+ObcToggleSwitch.styles = unsafeCSS(componentStyle);
+__decorateClass([
+  property({ type: String })
+], ObcToggleSwitch.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcToggleSwitch.prototype, "checked", 2);
+ObcToggleSwitch = __decorateClass([
+  customElement("obc-toggle-switch")
+], ObcToggleSwitch);
+export {
+  ObcToggleSwitch
+};
+//# sourceMappingURL=toggle-switch.js.map

package/dist/components/toggle-switch/toggle-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-switch.js","sources":["../../../src/components/toggle-switch/toggle-switch.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../icon-button/icon-button';\nimport componentStyle from './toggle-switch.css?inline';\n\n@customElement('obc-toggle-switch')\nexport class ObcToggleSwitch extends LitElement {\n  @property({type: String}) label = 'Label';\n  @property({type: Boolean}) checked = false;\n\n  override render() {\n    return html`\n      <label>\n        <span>${this.label}</span>\n        <div class=\"switch\">\n          <div class=\"presenter ${classMap({checked: this.checked})}\">\n            <div class=\"knob\"></div>\n            <input\n              type=\"checkbox\"\n              ?checked=${this.checked}\n              @click=${this._tryChange}\n            />\n          </div>\n        </div>\n      </label>\n    `;\n  }\n\n  _tryChange() {\n    this.checked = !this.checked;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-toggle-switch': ObcToggleSwitch;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAOa,IAAA,kBAAN,cAA8B,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AAC6B,SAAA,QAAA;AACG,SAAA,UAAA;AAAA,EAAA;AAAA,EAE5B,SAAS;AACT,WAAA;AAAA;AAAA,gBAEK,KAAK,KAAK;AAAA;AAAA,kCAEQ,SAAS,EAAC,SAAS,KAAK,QAAQ,CAAA,CAAC;AAAA;AAAA;AAAA;AAAA,yBAI1C,KAAK,OAAO;AAAA,uBACd,KAAK,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMpC;AAAA,EAEA,aAAa;AACN,SAAA,UAAU,CAAC,KAAK;AAAA,EACvB;AAGF;AA3Ba,gBA0BK,SAAS,UAAU,cAAc;AAzBvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,gBACe,WAAA,SAAA,CAAA;AACC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GAFd,gBAEgB,WAAA,WAAA,CAAA;AAFhB,kBAAN,gBAAA;AAAA,EADN,cAAc,mBAAmB;AAAA,GACrB,eAAA;"}

package/dist/components/tooltip/tooltip.css.js

@@ -0,0 +1,165 @@
+import { css } from "lit";
+const compentStyle = css`*, *::after, *::before {
+    box-sizing: border-box;
+}
+
+.wrapper {
+    position: relative;
+    isolation: isolate;
+    display: flex;
+    border-radius: 8px;
+    border: 1px solid var(--normal-enabled-border-color);
+    width: max-content;
+    background: var(--container-background-color, #F7F7F7);
+    box-shadow: var(--shadow-floating);
+}
+
+.wrapper.right-arrow {
+        flex-direction: row-reverse;
+    }
+
+.icon {
+    padding: 8px;
+    border-radius: 7px 0 0 7px;
+    color: var(--element-active-color);
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+}
+
+::slotted([slot="icon"]) {
+    height: 24px;
+    width: 24px;
+}
+
+.right-arrow .icon {
+    border-radius: 0 7px 7px 0;
+}
+
+.neutral .icon {
+        background: var(--instrument-frame-tertiary-color, #D9D9D9);
+        color: var(--element-neutral-color);
+    }
+
+.notification .icon {
+        background: var(--instrument-enhanced-primary-color, #0070D6);
+        color: var(--on-selected-active-color);
+    }
+
+.caution .icon {
+        background: var(--caution-enabled-background-color, #FAD900);
+    }
+
+.warning .icon {
+        background: var(--warning-enabled-background-color, #FF8C00);
+    }
+
+.alarm .icon {
+        background: var(--alarm-enabled-background-color, #E81123);
+        color: var(--on-alarm-active-color);
+    }
+
+
+
+.content {
+    display: flex;
+    flex-direction: column;
+    
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center
+}
+
+.title {
+    /* UI/Overline */
+    font-family: 'Noto Sans';
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+    /* 200% */
+    letter-spacing: 1.2px;
+    text-transform: uppercase;
+    color: var(--element-neutral-color, rgba(0, 0, 0, 0.59));
+    text-transform: uppercase;
+    padding-left: 16px;
+}
+
+.divider {
+    height: 1px;
+    border-radius: 1px;
+    background: var(--border-divider-color, rgba(0, 0, 0, 0.08));
+    margin: 0 4px;
+}
+
+.btn {
+    color: var(--element-active-color);
+    height: 40px;
+    display: flex;
+    align-items: center;
+}
+
+.text {
+    font-family: 'Noto Sans';
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 370;
+    line-height: 16px;
+    /* 133.333% */
+    color: var(--element-neutral-color, rgba(0, 0, 0, 0.59));
+    padding-left: 16px;
+    padding-right: 16px;
+    padding-bottom: 16px;
+    padding-top: 8px;
+}
+
+/* Arrows */
+.wrapper::before {
+    background: var(--instrument-frame-tertiary-color, #D9D9D9);
+    color: var(--element-neutral-color);
+    content: "";
+    position: absolute;
+    width: 15.5px;
+    height: 15.5px;
+    border: 1px solid var(--normal-enabled-border-color);
+    bottom: -7.5px;
+    left: 12px;
+    transform: rotate(-45deg) skew(-15deg, -15deg);
+    box-shadow: var(--shadow-floating); 
+}
+
+.right-arrow.wrapper::before {
+    left: auto;
+    right: 12px;
+}
+
+.neutral.wrapper::before {
+    background: var(--instrument-frame-tertiary-color, #D9D9D9);
+    color: var(--element-neutral-color);
+}
+
+.notification.wrapper::before  {
+    background: var(--instrument-enhanced-primary-color, #0070D6);
+    color: var(--on-selected-active-color);
+}
+
+.caution.wrapper::before  {
+    background: var(--caution-enabled-background-color, #FAD900);
+}
+
+.warning.wrapper::before  {
+    background: var(--warning-enabled-background-color, #FF8C00);
+}
+
+.alarm.wrapper::before  {
+    background: var(--alarm-enabled-background-color, #E81123);
+    color: var(--on-alarm-active-color);
+}
+`;
+export {
+  compentStyle as default
+};
+//# sourceMappingURL=tooltip.css.js.map

package/dist/components/tooltip/tooltip.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+import '../icon-button/icon-button';
+import '../../icons/icon-01-application-open';
+export declare enum TooltipVariant {
+    neutral = "neutral",
+    notification = "notification",
+    caution = "caution",
+    warning = "warning",
+    alarm = "alarm"
+}
+export declare class ObcTooltip extends LitElement {
+    variant: TooltipVariant;
+    label: string;
+    text: string;
+    rightArrow: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-tooltip': ObcTooltip;
+    }
+}
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/tooltip/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGhD,OAAO,4BAA4B,CAAC;AACpC,OAAO,sCAAsC,CAAC;AAG9C,oBAAY,cAAc;IACxB,OAAO,YAAY;IACnB,YAAY,iBAAiB;IAC7B,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,qBACa,UAAW,SAAQ,UAAU;IACd,OAAO,iBAA+B;IACtC,KAAK,SAAW;IAChB,IAAI,SAAkB;IACK,UAAU,UAAS;IAE/D,MAAM;IAkCf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}