@oicl/openbridge-webcomponents 0.0.7 → 0.0.9

package/src/icons/icon-01-content-cut.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-01-content-cut')
+export class Obi01ContentCut extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 21L12 14L9.65 16.35C9.78333 16.6 9.875 16.8667 9.925 17.15C9.975 17.4333 10 17.7167 10 18C10 19.1 9.60833 20.0417 8.825 20.825C8.04167 21.6083 7.1 22 6 22C4.9 22 3.95833 21.6083 3.175 20.825C2.39167 20.0417 2 19.1 2 18C2 16.9 2.39167 15.9583 3.175 15.175C3.95833 14.3917 4.9 14 6 14C6.28333 14 6.56667 14.025 6.85 14.075C7.13333 14.125 7.4 14.2167 7.65 14.35L10 12L7.65 9.65C7.4 9.78333 7.13333 9.875 6.85 9.925C6.56667 9.975 6.28333 10 6 10C4.9 10 3.95833 9.60833 3.175 8.825C2.39167 8.04167 2 7.1 2 6C2 4.9 2.39167 3.95833 3.175 3.175C3.95833 2.39167 4.9 2 6 2C7.1 2 8.04167 2.39167 8.825 3.175C9.60833 3.95833 10 4.9 10 6C10 6.28333 9.975 6.56667 9.925 6.85C9.875 7.13333 9.78333 7.4 9.65 7.65L22 20V21H19ZM15 11L13 9L19 3H22V4L15 11ZM6 8C6.55 8 7.02083 7.80417 7.4125 7.4125C7.80417 7.02083 8 6.55 8 6C8 5.45 7.80417 4.97917 7.4125 4.5875C7.02083 4.19583 6.55 4 6 4C5.45 4 4.97917 4.19583 4.5875 4.5875C4.19583 4.97917 4 5.45 4 6C4 6.55 4.19583 7.02083 4.5875 7.4125C4.97917 7.80417 5.45 8 6 8ZM12 12.5C12.1333 12.5 12.25 12.45 12.35 12.35C12.45 12.25 12.5 12.1333 12.5 12C12.5 11.8667 12.45 11.75 12.35 11.65C12.25 11.55 12.1333 11.5 12 11.5C11.8667 11.5 11.75 11.55 11.65 11.65C11.55 11.75 11.5 11.8667 11.5 12C11.5 12.1333 11.55 12.25 11.65 12.35C11.75 12.45 11.8667 12.5 12 12.5ZM6 20C6.55 20 7.02083 19.8042 7.4125 19.4125C7.80417 19.0208 8 18.55 8 18C8 17.45 7.80417 16.9792 7.4125 16.5875C7.02083 16.1958 6.55 16 6 16C5.45 16 4.97917 16.1958 4.5875 16.5875C4.19583 16.9792 4 17.45 4 18C4 18.55 4.19583 19.0208 4.5875 19.4125C4.97917 19.8042 5.45 20 6 20Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 21L12 14L9.65 16.35C9.78333 16.6 9.875 16.8667 9.925 17.15C9.975 17.4333 10 17.7167 10 18C10 19.1 9.60833 20.0417 8.825 20.825C8.04167 21.6083 7.1 22 6 22C4.9 22 3.95833 21.6083 3.175 20.825C2.39167 20.0417 2 19.1 2 18C2 16.9 2.39167 15.9583 3.175 15.175C3.95833 14.3917 4.9 14 6 14C6.28333 14 6.56667 14.025 6.85 14.075C7.13333 14.125 7.4 14.2167 7.65 14.35L10 12L7.65 9.65C7.4 9.78333 7.13333 9.875 6.85 9.925C6.56667 9.975 6.28333 10 6 10C4.9 10 3.95833 9.60833 3.175 8.825C2.39167 8.04167 2 7.1 2 6C2 4.9 2.39167 3.95833 3.175 3.175C3.95833 2.39167 4.9 2 6 2C7.1 2 8.04167 2.39167 8.825 3.175C9.60833 3.95833 10 4.9 10 6C10 6.28333 9.975 6.56667 9.925 6.85C9.875 7.13333 9.78333 7.4 9.65 7.65L22 20V21H19ZM15 11L13 9L19 3H22V4L15 11ZM6 8C6.55 8 7.02083 7.80417 7.4125 7.4125C7.80417 7.02083 8 6.55 8 6C8 5.45 7.80417 4.97917 7.4125 4.5875C7.02083 4.19583 6.55 4 6 4C5.45 4 4.97917 4.19583 4.5875 4.5875C4.19583 4.97917 4 5.45 4 6C4 6.55 4.19583 7.02083 4.5875 7.4125C4.97917 7.80417 5.45 8 6 8ZM12 12.5C12.1333 12.5 12.25 12.45 12.35 12.35C12.45 12.25 12.5 12.1333 12.5 12C12.5 11.8667 12.45 11.75 12.35 11.65C12.25 11.55 12.1333 11.5 12 11.5C11.8667 11.5 11.75 11.55 11.65 11.65C11.55 11.75 11.5 11.8667 11.5 12C11.5 12.1333 11.55 12.25 11.65 12.35C11.75 12.45 11.8667 12.5 12 12.5ZM6 20C6.55 20 7.02083 19.8042 7.4125 19.4125C7.80417 19.0208 8 18.55 8 18C8 17.45 7.80417 16.9792 7.4125 16.5875C7.02083 16.1958 6.55 16 6 16C5.45 16 4.97917 16.1958 4.5875 16.5875C4.19583 16.9792 4 17.45 4 18C4 18.55 4.19583 19.0208 4.5875 19.4125C4.97917 19.8042 5.45 20 6 20Z" style="fill: var(--element-active-color)"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-01-content-cut': Obi01ContentCut;
+  }
+}

package/src/icons/icon-01-content-paste.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-01-content-paste')
+export class Obi01ContentPaste extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6C3 5.45 3.19583 4.97917 3.5875 4.5875C3.97917 4.19583 4.45 4 5 4H9.175C9.35833 3.41667 9.71667 2.9375 10.25 2.5625C10.7833 2.1875 11.3667 2 12 2C12.6667 2 13.2625 2.1875 13.7875 2.5625C14.3125 2.9375 14.6667 3.41667 14.85 4H19C19.55 4 20.0208 4.19583 20.4125 4.5875C20.8042 4.97917 21 5.45 21 6V20C21 20.55 20.8042 21.0208 20.4125 21.4125C20.0208 21.8042 19.55 22 19 22H5ZM5 20H19V6H17V9H7V6H5V20ZM12 6C12.2833 6 12.5208 5.90417 12.7125 5.7125C12.9042 5.52083 13 5.28333 13 5C13 4.71667 12.9042 4.47917 12.7125 4.2875C12.5208 4.09583 12.2833 4 12 4C11.7167 4 11.4792 4.09583 11.2875 4.2875C11.0958 4.47917 11 4.71667 11 5C11 5.28333 11.0958 5.52083 11.2875 5.7125C11.4792 5.90417 11.7167 6 12 6Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6C3 5.45 3.19583 4.97917 3.5875 4.5875C3.97917 4.19583 4.45 4 5 4H9.175C9.35833 3.41667 9.71667 2.9375 10.25 2.5625C10.7833 2.1875 11.3667 2 12 2C12.6667 2 13.2625 2.1875 13.7875 2.5625C14.3125 2.9375 14.6667 3.41667 14.85 4H19C19.55 4 20.0208 4.19583 20.4125 4.5875C20.8042 4.97917 21 5.45 21 6V20C21 20.55 20.8042 21.0208 20.4125 21.4125C20.0208 21.8042 19.55 22 19 22H5ZM5 20H19V6H17V9H7V6H5V20ZM12 6C12.2833 6 12.5208 5.90417 12.7125 5.7125C12.9042 5.52083 13 5.28333 13 5C13 4.71667 12.9042 4.47917 12.7125 4.2875C12.5208 4.09583 12.2833 4 12 4C11.7167 4 11.4792 4.09583 11.2875 4.2875C11.0958 4.47917 11 4.71667 11 5C11 5.28333 11.0958 5.52083 11.2875 5.7125C11.4792 5.90417 11.7167 6 12 6Z" style="fill: var(--element-active-color)"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-01-content-paste': Obi01ContentPaste;
+  }
+}

package/src/icons/icon-02-dock-bottom.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-02-dock-bottom')
+export class Obi02DockBottom extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 16V19H19V16H5ZM5 14H19V5H5V14Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 16V19H19V16H5ZM5 14H19V5H5V14Z" style="fill: var(--element-active-color)"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-02-dock-bottom': Obi02DockBottom;
+  }
+}

package/src/icons/icon-02-dock-left.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-02-dock-left')
+export class Obi02DockLeft extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM8 19V5H5V19H8ZM10 19H19V5H10V19Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM8 19V5H5V19H8ZM10 19H19V5H10V19Z" style="fill: var(--element-active-color)"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-02-dock-left': Obi02DockLeft;
+  }
+}

package/src/icons/icon-02-dock-right.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-02-dock-right')
+export class Obi02DockRight extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM16 19H19V5H16V19ZM14 19V5H5V19H14Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM16 19H19V5H16V19ZM14 19V5H5V19H14Z" style="fill: var(--element-active-color)"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-02-dock-right': Obi02DockRight;
+  }
+}

package/src/icons/icon-03-license.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-03-license')
+export class Obi03License extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 13C11.1667 13 10.4583 12.7083 9.875 12.125C9.29167 11.5417 9 10.8333 9 10C9 9.16667 9.29167 8.45833 9.875 7.875C10.4583 7.29167 11.1667 7 12 7C12.8333 7 13.5417 7.29167 14.125 7.875C14.7083 8.45833 15 9.16667 15 10C15 10.8333 14.7083 11.5417 14.125 12.125C13.5417 12.7083 12.8333 13 12 13ZM6 23V15.275C5.36667 14.575 4.875 13.775 4.525 12.875C4.175 11.975 4 11.0167 4 10C4 7.76667 4.775 5.875 6.325 4.325C7.875 2.775 9.76667 2 12 2C14.2333 2 16.125 2.775 17.675 4.325C19.225 5.875 20 7.76667 20 10C20 11.0167 19.825 11.975 19.475 12.875C19.125 13.775 18.6333 14.575 18 15.275V23L12 21L6 23ZM12 16C13.6667 16 15.0833 15.4167 16.25 14.25C17.4167 13.0833 18 11.6667 18 10C18 8.33333 17.4167 6.91667 16.25 5.75C15.0833 4.58333 13.6667 4 12 4C10.3333 4 8.91667 4.58333 7.75 5.75C6.58333 6.91667 6 8.33333 6 10C6 11.6667 6.58333 13.0833 7.75 14.25C8.91667 15.4167 10.3333 16 12 16ZM8 20.025L12 19L16 20.025V16.925C15.4167 17.2583 14.7875 17.5208 14.1125 17.7125C13.4375 17.9042 12.7333 18 12 18C11.2667 18 10.5625 17.9042 9.8875 17.7125C9.2125 17.5208 8.58333 17.2583 8 16.925V20.025Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 13C11.1667 13 10.4583 12.7083 9.875 12.125C9.29167 11.5417 9 10.8333 9 10C9 9.16667 9.29167 8.45833 9.875 7.875C10.4583 7.29167 11.1667 7 12 7C12.8333 7 13.5417 7.29167 14.125 7.875C14.7083 8.45833 15 9.16667 15 10C15 10.8333 14.7083 11.5417 14.125 12.125C13.5417 12.7083 12.8333 13 12 13ZM6 23V15.275C5.36667 14.575 4.875 13.775 4.525 12.875C4.175 11.975 4 11.0167 4 10C4 7.76667 4.775 5.875 6.325 4.325C7.875 2.775 9.76667 2 12 2C14.2333 2 16.125 2.775 17.675 4.325C19.225 5.875 20 7.76667 20 10C20 11.0167 19.825 11.975 19.475 12.875C19.125 13.775 18.6333 14.575 18 15.275V23L12 21L6 23ZM12 16C13.6667 16 15.0833 15.4167 16.25 14.25C17.4167 13.0833 18 11.6667 18 10C18 8.33333 17.4167 6.91667 16.25 5.75C15.0833 4.58333 13.6667 4 12 4C10.3333 4 8.91667 4.58333 7.75 5.75C6.58333 6.91667 6 8.33333 6 10C6 11.6667 6.58333 13.0833 7.75 14.25C8.91667 15.4167 10.3333 16 12 16ZM8 20.025L12 19L16 20.025V16.925C15.4167 17.2583 14.7875 17.5208 14.1125 17.7125C13.4375 17.9042 12.7333 18 12 18C11.2667 18 10.5625 17.9042 9.8875 17.7125C9.2125 17.5208 8.58333 17.2583 8 16.925V20.025Z" style="fill: var(--element-active-color)"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-03-license': Obi03License;
+  }
+}

package/src/icons/icon-03-star-unchecked.ts

@@ -11,7 +11,7 @@ export class Obi03StarUnchecked extends LitElement {
 `;
 
   private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 3.95297L14.217 9.28339L14.3929 9.70636L14.8496 9.74297L20.6042 10.2043L16.2198 13.96L15.8719 14.2581L15.9781 14.7037L17.3177 20.3192L12.3909 17.3099L12 17.0712L11.609 17.3099L6.68224 20.3192L8.02175 14.7037L8.12804 14.2581L7.78014 13.96L3.39571 10.2043L9.15035 9.74297L9.60698 9.70636L9.7829 9.28339L12 3.95297Z" stroke="#1A1A1A" stroke-width="1.5"/>
+<path d="M12 3.95297L14.217 9.28339L14.3929 9.70636L14.8496 9.74297L20.6042 10.2043L16.2198 13.96L15.8719 14.2581L15.9781 14.7037L17.3177 20.3192L12.3909 17.3099L12 17.0712L11.609 17.3099L6.68224 20.3192L8.02175 14.7037L8.12804 14.2581L7.78014 13.96L3.39571 10.2043L9.15035 9.74297L9.60698 9.70636L9.7829 9.28339L12 3.95297Z" style="stroke: var(--element-active-color)" stroke-width="1.5"/>
 </svg>
 `;
 

package/src/icons/icon-04-colorcalibrated.ts

@@ -6,24 +6,12 @@ export class Obi04Colorcalibrated extends LitElement {
   @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
 
   private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path d="M2 9C2 11.5093 3.42193 13.6866 5.504 14.7699L5.63134 13.6936C4.05304 12.7268 3 10.9864 3 9C3 5.96243 5.46243 3.5 8.5 3.5C9.45818 3.5 10.3591 3.74502 11.1436 4.17583L12 3.52182C10.9897 2.875 9.78864 2.5 8.5 2.5C4.91015 2.5 2 5.41015 2 9Z" fill="currentColor"/>
-<path d="M15 9C15 7.08606 14.1728 5.36533 12.8564 4.17583L12 4.75716C13.1766 5.72889 13.9422 7.18061 13.9969 8.81249L14.996 9.23013C14.9987 9.15375 15 9.07703 15 9Z" fill="currentColor"/>
-<path d="M15.5 2.5C14.2114 2.5 13.0103 2.875 12 3.52182L11.1436 4.17583C9.82721 5.36533 9 7.08606 9 9C9 9.07703 9.00134 9.15375 9.004 9.23013L10.0031 8.81249C10.0578 7.18061 10.8234 5.72889 12 4.75716L12.8564 4.17583C13.6409 3.74502 14.5418 3.5 15.5 3.5C18.5376 3.5 21 5.96243 21 9C21 10.9864 19.947 12.7268 18.3687 13.6936L18.496 14.7699C20.5781 13.6866 22 11.5093 22 9C22 5.41015 19.0899 2.5 15.5 2.5Z" fill="currentColor"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5 15C18.5 14.923 18.4987 14.8463 18.496 14.7699L18.3687 13.6936C17.9719 11.7489 16.7068 10.1203 14.996 9.23013L13.9969 8.81249C13.3677 8.6096 12.6967 8.5 12 8.5C11.3033 8.5 10.6323 8.6096 10.0031 8.81249L9.004 9.23013C7.29322 10.1203 6.02814 11.7489 5.63134 13.6936L5.504 14.7699C5.50134 14.8463 5.5 14.923 5.5 15C5.5 18.5899 8.41015 21.5 12 21.5C15.5899 21.5 18.5 18.5899 18.5 15ZM6.56527 14.1501C6.8176 12.5234 7.78272 11.1325 9.13134 10.3065L10.0653 9.84993C10.6671 9.62373 11.3191 9.5 12 9.5C12.6809 9.5 13.3329 9.62373 13.9347 9.84993L14.8687 10.3065C16.2173 11.1325 17.1824 12.5234 17.4347 14.1501L17.4969 15.1875C17.398 18.1383 14.9748 20.5 12 20.5C9.02519 20.5 6.60199 18.1383 6.50314 15.1875L6.56527 14.1501Z" fill="currentColor"/>
-<path d="M12.8564 13.8242C13.865 12.9128 14.5864 11.6895 14.8687 10.3065L13.9347 9.84993C13.7238 11.2097 13.0148 12.4048 12 13.2428L12.8564 13.8242Z" fill="currentColor"/>
-<path d="M9.13134 10.3065C9.41355 11.6895 10.135 12.9128 11.1436 13.8242L12 14.4782C13.0103 15.125 14.2114 15.5 15.5 15.5C16.1967 15.5 16.8677 15.3904 17.4969 15.1875L17.4347 14.1501C16.8329 14.3763 16.1809 14.5 15.5 14.5C14.5418 14.5 13.6409 14.255 12.8564 13.8242L12 13.2428C10.9852 12.4048 10.2762 11.2097 10.0653 9.84993L9.13134 10.3065Z" fill="currentColor"/>
-<path d="M11.1436 13.8242C10.3591 14.255 9.45818 14.5 8.5 14.5C7.81911 14.5 7.16711 14.3763 6.56527 14.1501L6.50314 15.1875C7.13229 15.3904 7.80335 15.5 8.5 15.5C9.78864 15.5 10.9897 15.125 12 14.4782L11.1436 13.8242Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.03063 15.3408C2.64918 14.2237 1 11.8044 1 9C1 5.13401 4.13401 2 8 2C9.48725 2 10.8662 2.46381 12 3.25469C13.1338 2.46381 14.5128 2 16 2C19.866 2 23 5.13401 23 9C23 11.8044 21.3508 14.2237 18.9694 15.3408C18.9896 15.5578 19 15.7777 19 16C19 19.866 15.866 23 12 23C8.13401 23 5 19.866 5 16C5 15.7777 5.01036 15.5578 5.03063 15.3408ZM8 14C8.91083 14 9.76477 13.7565 10.5003 13.3309C10.101 12.8246 9.77013 12.2618 9.52165 11.6565C8.60135 12.1827 7.86438 12.993 7.43021 13.9679C7.61721 13.9891 7.80733 14 8 14ZM5.52165 13.3435C4.01522 12.4821 3 10.8596 3 9C3 6.23858 5.23858 4 8 4C8.91083 4 9.76477 4.24354 10.5003 4.66906C9.56068 5.86059 9 7.36482 9 9C9 9.2223 9.01036 9.44217 9.03063 9.65917C7.44767 10.4017 6.18825 11.7196 5.52165 13.3435ZM16.9995 15.9292C16.9998 15.9527 17 15.9764 17 16C17 18.7614 14.7614 21 12 21C9.23858 21 7 18.7614 7 16C7 15.9764 7.00017 15.9527 7.00049 15.9292C7.32694 15.9759 7.66065 16 8 16C9.48725 16 10.8662 15.5362 12 14.7453C13.1338 15.5362 14.5128 16 16 16C16.3394 16 16.6731 15.9759 16.9995 15.9292ZM18.4783 13.3435C19.9848 12.4821 21 10.8596 21 9C21 6.23858 18.7614 4 16 4C15.0892 4 14.2352 4.24355 13.4997 4.66907C14.4393 5.86059 15 7.36482 15 9C15 9.2223 14.9896 9.44217 14.9694 9.65917C16.5523 10.4017 17.8118 11.7196 18.4783 13.3435ZM14.4783 11.6565C15.3987 12.1827 16.1356 12.993 16.5698 13.9679C16.3828 13.9891 16.1927 14 16 14C15.0892 14 14.2352 13.7565 13.4997 13.3309C13.899 12.8246 14.2299 12.2618 14.4783 11.6565ZM12.9995 9.07082C12.9998 9.04725 13 9.02365 13 9C13 7.87418 12.6279 6.83526 12 5.99952C11.3721 6.83526 11 7.87418 11 9C11 9.02365 11.0002 9.04725 11.0005 9.07082C11.3269 9.02415 11.6607 9 12 9C12.3393 9 12.6731 9.02415 12.9995 9.07082ZM11.4302 11.0321C11.6172 11.0109 11.8073 11 12 11C12.1927 11 12.3828 11.0109 12.5698 11.0321C12.4161 11.3773 12.2244 11.7019 12 12.0005C11.7756 11.7019 11.5839 11.3773 11.4302 11.0321Z" fill="currentColor"/>
 </svg>
 `;
 
   private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2 9C2 11.5093 3.42193 13.6866 5.504 14.7699L5.63134 13.6936C4.05304 12.7268 3 10.9864 3 9C3 5.96243 5.46243 3.5 8.5 3.5C9.45818 3.5 10.3591 3.74502 11.1436 4.17583L12 3.52182C10.9897 2.875 9.78864 2.5 8.5 2.5C4.91015 2.5 2 5.41015 2 9Z" style="fill: var(--element-active-color)"/>
-<path d="M15 9C15 7.08606 14.1728 5.36533 12.8564 4.17583L12 4.75716C13.1766 5.72889 13.9422 7.18061 13.9969 8.81249L14.996 9.23013C14.9987 9.15375 15 9.07703 15 9Z" style="fill: var(--element-active-color)"/>
-<path d="M15.5 2.5C14.2114 2.5 13.0103 2.875 12 3.52182L11.1436 4.17583C9.82721 5.36533 9 7.08606 9 9C9 9.07703 9.00134 9.15375 9.004 9.23013L10.0031 8.81249C10.0578 7.18061 10.8234 5.72889 12 4.75716L12.8564 4.17583C13.6409 3.74502 14.5418 3.5 15.5 3.5C18.5376 3.5 21 5.96243 21 9C21 10.9864 19.947 12.7268 18.3687 13.6936L18.496 14.7699C20.5781 13.6866 22 11.5093 22 9C22 5.41015 19.0899 2.5 15.5 2.5Z" style="fill: var(--element-active-color)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5 15C18.5 14.923 18.4987 14.8463 18.496 14.7699L18.3687 13.6936C17.9719 11.7489 16.7068 10.1203 14.996 9.23013L13.9969 8.81249C13.3677 8.6096 12.6967 8.5 12 8.5C11.3033 8.5 10.6323 8.6096 10.0031 8.81249L9.004 9.23013C7.29322 10.1203 6.02814 11.7489 5.63134 13.6936L5.504 14.7699C5.50134 14.8463 5.5 14.923 5.5 15C5.5 18.5899 8.41015 21.5 12 21.5C15.5899 21.5 18.5 18.5899 18.5 15ZM6.56527 14.1501C6.8176 12.5234 7.78272 11.1325 9.13134 10.3065L10.0653 9.84993C10.6671 9.62373 11.3191 9.5 12 9.5C12.6809 9.5 13.3329 9.62373 13.9347 9.84993L14.8687 10.3065C16.2173 11.1325 17.1824 12.5234 17.4347 14.1501L17.4969 15.1875C17.398 18.1383 14.9748 20.5 12 20.5C9.02519 20.5 6.60199 18.1383 6.50314 15.1875L6.56527 14.1501Z" style="fill: var(--element-active-color)"/>
-<path d="M12.8564 13.8242C13.865 12.9128 14.5864 11.6895 14.8687 10.3065L13.9347 9.84993C13.7238 11.2097 13.0148 12.4048 12 13.2428L12.8564 13.8242Z" style="fill: var(--element-active-color)"/>
-<path d="M9.13134 10.3065C9.41355 11.6895 10.135 12.9128 11.1436 13.8242L12 14.4782C13.0103 15.125 14.2114 15.5 15.5 15.5C16.1967 15.5 16.8677 15.3904 17.4969 15.1875L17.4347 14.1501C16.8329 14.3763 16.1809 14.5 15.5 14.5C14.5418 14.5 13.6409 14.255 12.8564 13.8242L12 13.2428C10.9852 12.4048 10.2762 11.2097 10.0653 9.84993L9.13134 10.3065Z" style="fill: var(--element-active-color)"/>
-<path d="M11.1436 13.8242C10.3591 14.255 9.45818 14.5 8.5 14.5C7.81911 14.5 7.16711 14.3763 6.56527 14.1501L6.50314 15.1875C7.13229 15.3904 7.80335 15.5 8.5 15.5C9.78864 15.5 10.9897 15.125 12 14.4782L11.1436 13.8242Z" style="fill: var(--element-active-color)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.03063 15.3408C2.64918 14.2237 1 11.8044 1 9C1 5.13401 4.13401 2 8 2C9.48725 2 10.8662 2.46381 12 3.25469C13.1338 2.46381 14.5128 2 16 2C19.866 2 23 5.13401 23 9C23 11.8044 21.3508 14.2237 18.9694 15.3408C18.9896 15.5578 19 15.7777 19 16C19 19.866 15.866 23 12 23C8.13401 23 5 19.866 5 16C5 15.7777 5.01036 15.5578 5.03063 15.3408ZM8 14C8.91083 14 9.76477 13.7565 10.5003 13.3309C10.101 12.8246 9.77013 12.2618 9.52165 11.6565C8.60135 12.1827 7.86438 12.993 7.43021 13.9679C7.61721 13.9891 7.80733 14 8 14ZM5.52165 13.3435C4.01522 12.4821 3 10.8596 3 9C3 6.23858 5.23858 4 8 4C8.91083 4 9.76477 4.24354 10.5003 4.66906C9.56068 5.86059 9 7.36482 9 9C9 9.2223 9.01036 9.44217 9.03063 9.65917C7.44767 10.4017 6.18825 11.7196 5.52165 13.3435ZM16.9995 15.9292C16.9998 15.9527 17 15.9764 17 16C17 18.7614 14.7614 21 12 21C9.23858 21 7 18.7614 7 16C7 15.9764 7.00017 15.9527 7.00049 15.9292C7.32694 15.9759 7.66065 16 8 16C9.48725 16 10.8662 15.5362 12 14.7453C13.1338 15.5362 14.5128 16 16 16C16.3394 16 16.6731 15.9759 16.9995 15.9292ZM18.4783 13.3435C19.9848 12.4821 21 10.8596 21 9C21 6.23858 18.7614 4 16 4C15.0892 4 14.2352 4.24355 13.4997 4.66907C14.4393 5.86059 15 7.36482 15 9C15 9.2223 14.9896 9.44217 14.9694 9.65917C16.5523 10.4017 17.8118 11.7196 18.4783 13.3435ZM14.4783 11.6565C15.3987 12.1827 16.1356 12.993 16.5698 13.9679C16.3828 13.9891 16.1927 14 16 14C15.0892 14 14.2352 13.7565 13.4997 13.3309C13.899 12.8246 14.2299 12.2618 14.4783 11.6565ZM12.9995 9.07082C12.9998 9.04725 13 9.02365 13 9C13 7.87418 12.6279 6.83526 12 5.99952C11.3721 6.83526 11 7.87418 11 9C11 9.02365 11.0002 9.04725 11.0005 9.07082C11.3269 9.02415 11.6607 9 12 9C12.3393 9 12.6731 9.02415 12.9995 9.07082ZM11.4302 11.0321C11.6172 11.0109 11.8073 11 12 11C12.1927 11 12.3828 11.0109 12.5698 11.0321C12.4161 11.3773 12.2244 11.7019 12 12.0005C11.7756 11.7019 11.5839 11.3773 11.4302 11.0321Z" style="fill: var(--element-active-color)"/>
 </svg>
 `;
 

package/src/icons/icon-07-target-associated-ais-camera.ts

@@ -0,0 +1,42 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-07-target-associated-ais-camera')
+export class Obi07TargetAssociatedAisCamera extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 0.99999L19 20.9998H5.00019L12.0001 0.99999ZM7.81913 18.9998L12.0001 7.0541L16.1811 18.9998H7.81913Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.000244138 1.99998C0.000244138 0.895421 0.895666 0 2.00022 0L22 0C23.1046 0 24 0.895421 24 1.99998V21.9998C24 23.1043 23.1046 23.9998 22 23.9998H2.00022C0.895665 23.9998 0.000244138 23.1043 0.000244138 21.9998V1.99998ZM12.0001 0.99999H22C22.5523 0.99999 23 1.4477 23 1.99998V21.9998C23 22.5521 22.5523 22.9998 22 22.9998H2.00022C1.44794 22.9998 1.00023 22.5521 1.00023 21.9998V1.99998C1.00023 1.4477 1.44794 0.99999 2.00022 0.99999H12.0001Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 0.99999L19 20.9998H5.00019L12.0001 0.99999ZM7.81913 18.9998L12.0001 7.0541L16.1811 18.9998H7.81913Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.000244138 1.99998C0.000244138 0.895421 0.895666 0 2.00022 0L22 0C23.1046 0 24 0.895421 24 1.99998V21.9998C24 23.1043 23.1046 23.9998 22 23.9998H2.00022C0.895665 23.9998 0.000244138 23.1043 0.000244138 21.9998V1.99998ZM12.0001 0.99999H22C22.5523 0.99999 23 1.4477 23 1.99998V21.9998C23 22.5521 22.5523 22.9998 22 22.9998H2.00022C1.44794 22.9998 1.00023 22.5521 1.00023 21.9998V1.99998C1.00023 1.4477 1.44794 0.99999 2.00022 0.99999H12.0001Z" fill="currentColor"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-07-target-associated-ais-camera': Obi07TargetAssociatedAisCamera;
+  }
+}

package/src/icons/icon-07-target-associated-camera-radar.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-07-target-associated-camera-radar')
+export class Obi07TargetAssociatedCameraRadar extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM6 8C6 6.89543 6.89543 6 8 6H16C17.1046 6 18 6.89543 18 8V16C18 17.1046 17.1046 18 16 18H8C6.89543 18 6 17.1046 6 16V8ZM8 8H16V16H8V8Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM6 8C6 6.89543 6.89543 6 8 6H16C17.1046 6 18 6.89543 18 8V16C18 17.1046 17.1046 18 16 18H8C6.89543 18 6 17.1046 6 16V8ZM8 8H16V16H8V8Z" fill="currentColor"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-07-target-associated-camera-radar': Obi07TargetAssociatedCameraRadar;
+  }
+}

package/src/icons/icon-07-target-associated-radar-camera.ts

@@ -0,0 +1,42 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-07-target-associated-radar-camera')
+export class Obi07TargetAssociatedRadarCamera extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0001 11.9999C18.0001 15.3136 15.3138 17.9998 12.0001 17.9998C8.68645 17.9998 6.00018 15.3136 6.00018 11.9999C6.00018 8.6862 8.68645 5.99994 12.0001 5.99994C15.3138 5.99994 18.0001 8.6862 18.0001 11.9999ZM16.0001 11.9999C16.0001 14.209 14.2092 15.9998 12.0001 15.9998C9.79101 15.9998 8.00016 14.209 8.00016 11.9999C8.00016 9.79076 9.79101 7.99992 12.0001 7.99992C14.2092 7.99992 16.0001 9.79076 16.0001 11.9999Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.000244138 1.99998C0.000244138 0.895421 0.895666 0 2.00022 0L22 0C23.1046 0 24 0.895421 24 1.99998V21.9998C24 23.1043 23.1046 23.9998 22 23.9998H2.00022C0.895665 23.9998 0.000244138 23.1043 0.000244138 21.9998V1.99998ZM2.00022 0.99999H22C22.5523 0.99999 23 1.4477 23 1.99998V21.9998C23 22.5521 22.5523 22.9998 22 22.9998H2.00022C1.44794 22.9998 1.00023 22.5521 1.00023 21.9998V1.99998C1.00023 1.4477 1.44794 0.99999 2.00022 0.99999Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0001 11.9999C18.0001 15.3136 15.3138 17.9998 12.0001 17.9998C8.68645 17.9998 6.00018 15.3136 6.00018 11.9999C6.00018 8.6862 8.68645 5.99994 12.0001 5.99994C15.3138 5.99994 18.0001 8.6862 18.0001 11.9999ZM16.0001 11.9999C16.0001 14.209 14.2092 15.9998 12.0001 15.9998C9.79101 15.9998 8.00016 14.209 8.00016 11.9999C8.00016 9.79076 9.79101 7.99992 12.0001 7.99992C14.2092 7.99992 16.0001 9.79076 16.0001 11.9999Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.000244138 1.99998C0.000244138 0.895421 0.895666 0 2.00022 0L22 0C23.1046 0 24 0.895421 24 1.99998V21.9998C24 23.1043 23.1046 23.9998 22 23.9998H2.00022C0.895665 23.9998 0.000244138 23.1043 0.000244138 21.9998V1.99998ZM2.00022 0.99999H22C22.5523 0.99999 23 1.4477 23 1.99998V21.9998C23 22.5521 22.5523 22.9998 22 22.9998H2.00022C1.44794 22.9998 1.00023 22.5521 1.00023 21.9998V1.99998C1.00023 1.4477 1.44794 0.99999 2.00022 0.99999Z" fill="currentColor"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-07-target-associated-radar-camera': Obi07TargetAssociatedRadarCamera;
+  }
+}

package/src/icons/icon-07-target-camera.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-07-target-camera')
+export class Obi07TargetCamera extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 7H7L7 17H17V7ZM7 5C5.89543 5 5 5.89543 5 7V17C5 18.1046 5.89543 19 7 19H17C18.1046 19 19 18.1046 19 17V7C19 5.89543 18.1046 5 17 5H7Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 7H7L7 17H17V7ZM7 5C5.89543 5 5 5.89543 5 7V17C5 18.1046 5.89543 19 7 19H17C18.1046 19 19 18.1046 19 17V7C19 5.89543 18.1046 5 17 5H7Z" style="fill: var(--element-active-color)"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-07-target-camera': Obi07TargetCamera;
+  }
+}

package/src/icons/icon-08-backward-fast.ts

@@ -19,7 +19,7 @@ export class Obi08BackwardFast extends LitElement {
 
   private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_18893_326435)">
-<path d="M9.44737 5.04375L9.44737 18.9562L0.797826 12L9.44737 5.04375ZM20.5 5.04375L20.5 18.9562L11.8505 12L20.5 5.04375Z" style="fill: var(--automation-device-primary-color)" stroke="black"/>
+<path d="M9.44737 5.04375L9.44737 18.9562L0.797826 12L9.44737 5.04375ZM20.5 5.04375L20.5 18.9562L11.8505 12L20.5 5.04375Z" style="fill: var(--automation-device-primary-color)" style="stroke: var(--automation-device-tertiary-color)"/>
 </g>
 <defs>
 <clipPath id="clip0_18893_326435">

package/src/icons/icon-08-backward-stopped.ts

@@ -11,7 +11,7 @@ export class Obi08BackwardStopped extends LitElement {
 `;
 
   private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.5 18.9282L4.5 12L16.5 5.0718L16.5 18.9282Z" style="fill: var(--automation-device-primary-inverted-color)" stroke="#808080"/>
+<path d="M16.5 18.9282L4.5 12L16.5 5.0718L16.5 18.9282Z" style="fill: var(--automation-device-primary-inverted-color)" style="stroke: var(--automation-device-tertiary-inverted-color)"/>
 </svg>
 `;
 

package/src/icons/icon-08-forward-fast.ts

@@ -11,7 +11,7 @@ export class Obi08ForwardFast extends LitElement {
 `;
 
   private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.5526 18.9562L14.5526 5.04375L23.2022 12L14.5526 18.9562ZM3.5 18.9562L3.5 5.04375L12.1495 12L3.5 18.9562Z" style="fill: var(--automation-device-primary-color)" stroke="black"/>
+<path d="M14.5526 18.9562L14.5526 5.04375L23.2022 12L14.5526 18.9562ZM3.5 18.9562L3.5 5.04375L12.1495 12L3.5 18.9562Z" style="fill: var(--automation-device-primary-color)" style="stroke: var(--automation-device-tertiary-color)"/>
 </svg>
 `;
 

package/src/icons/icon-08-forward-stopped.ts

@@ -11,7 +11,7 @@ export class Obi08ForwardStopped extends LitElement {
 `;
 
   private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.5 5.0718L19.5 12L7.5 18.9282L7.5 5.0718Z" style="fill: var(--automation-device-primary-inverted-color)" stroke="#808080"/>
+<path d="M7.5 5.0718L19.5 12L7.5 18.9282L7.5 5.0718Z" style="fill: var(--automation-device-primary-inverted-color)" style="stroke: var(--automation-device-tertiary-inverted-color)"/>
 </svg>
 `;
 

package/src/icons/icon-08-motor-off-horisontal.ts

@@ -11,7 +11,7 @@ export class Obi08MotorOffHorisontal extends LitElement {
 `;
 
   private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.5 7.5H3C1.61929 7.5 0.5 8.61929 0.5 10C0.5 11.3807 1.61929 12.5 3 12.5H3.5V13C3.5 13.8284 4.17157 14.5 5 14.5H6H6.5V15C6.5 15.8284 7.17157 16.5 8 16.5H8.5V17V19.5H5.5C4.94772 19.5 4.5 19.9477 4.5 20.5C4.5 21.0523 4.94771 21.5 5.5 21.5H18.5C19.0523 21.5 19.5 21.0523 19.5 20.5C19.5 19.9477 19.0523 19.5 18.5 19.5H15.5V17V16.5H16C16.8284 16.5 17.5 15.8284 17.5 15V14.5H18H21C21.8284 14.5 22.5 13.8284 22.5 13V7C22.5 6.17157 21.8284 5.5 21 5.5H18H17.5V5C17.5 4.17157 16.8284 3.5 16 3.5H8C7.17157 3.5 6.5 4.17157 6.5 5V5.5H6H5C4.17157 5.5 3.5 6.17157 3.5 7V7.5Z" style="fill: var(--automation-device-primary-inverted-color)" stroke="#808080"/>
+<path d="M3.5 7.5H3C1.61929 7.5 0.5 8.61929 0.5 10C0.5 11.3807 1.61929 12.5 3 12.5H3.5V13C3.5 13.8284 4.17157 14.5 5 14.5H6H6.5V15C6.5 15.8284 7.17157 16.5 8 16.5H8.5V17V19.5H5.5C4.94772 19.5 4.5 19.9477 4.5 20.5C4.5 21.0523 4.94771 21.5 5.5 21.5H18.5C19.0523 21.5 19.5 21.0523 19.5 20.5C19.5 19.9477 19.0523 19.5 18.5 19.5H15.5V17V16.5H16C16.8284 16.5 17.5 15.8284 17.5 15V14.5H18H21C21.8284 14.5 22.5 13.8284 22.5 13V7C22.5 6.17157 21.8284 5.5 21 5.5H18H17.5V5C17.5 4.17157 16.8284 3.5 16 3.5H8C7.17157 3.5 6.5 4.17157 6.5 5V5.5H6H5C4.17157 5.5 3.5 6.17157 3.5 7V7.5Z" style="fill: var(--automation-device-primary-inverted-color)" style="stroke: var(--automation-device-tertiary-inverted-color)"/>
 </svg>
 `;
 

package/src/icons/icon-09-switch-horizontal-off-large.ts

@@ -11,7 +11,7 @@ export class Obi09SwitchHorizontalOffLarge extends LitElement {
 `;
 
   private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.11603 15.567C2.39859 15.9812 2.15277 16.8986 2.56699 17.616C2.9812 18.3335 3.89859 18.5793 4.61603 18.1651L21.0705 8.66506C21.7879 8.25085 22.0338 7.33347 21.6195 6.61603C21.2053 5.89859 20.2879 5.65277 19.5705 6.06699L3.11603 15.567Z" style="fill: var(--automation-device-primary-inverted-color)" stroke="#808080"/>
+<path d="M3.11603 15.567C2.39859 15.9812 2.15277 16.8986 2.56699 17.616C2.9812 18.3335 3.89859 18.5793 4.61603 18.1651L21.0705 8.66506C21.7879 8.25085 22.0338 7.33347 21.6195 6.61603C21.2053 5.89859 20.2879 5.65277 19.5705 6.06699L3.11603 15.567Z" style="fill: var(--automation-device-primary-inverted-color)" style="stroke: var(--automation-device-tertiary-inverted-color)"/>
 </svg>
 `;
 

package/src/icons/icon-09-switch-horizontal-off.ts

@@ -11,7 +11,7 @@ export class Obi09SwitchHorizontalOff extends LitElement {
 `;
 
   private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1.31699" y="14.817" width="21" height="5" rx="2.5" transform="rotate(-30 1.31699 14.817)" style="fill: var(--automation-device-primary-inverted-color)" stroke="#808080"/>
+<rect x="1.31699" y="14.817" width="21" height="5" rx="2.5" transform="rotate(-30 1.31699 14.817)" style="fill: var(--automation-device-primary-inverted-color)" style="stroke: var(--automation-device-tertiary-inverted-color)"/>
 </svg>
 `;
 

package/src/icons/icon-10-autonomous.ts

@@ -19,9 +19,9 @@ export class Obi10Autonomous extends LitElement {
 <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 3.5C11.1792 3.5 9.8953 3.93582 8.84743 4.73988C7.79957 5.54394 7.0463 6.67129 6.70445 7.94709L5.25556 7.55886C5.68287 5.96411 6.62446 4.55492 7.93429 3.54985C9.24412 2.54478 10.849 2 12.5 2C14.151 2 15.7559 2.54478 17.0657 3.54985C18.3755 4.55492 19.3171 5.96411 19.7444 7.55886L18.2956 7.94709C17.9537 6.67129 17.2004 5.54394 16.1526 4.73988C15.1047 3.93582 13.8208 3.5 12.5 3.5Z" style="fill: var(--element-active-color)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 6.5C11.8396 6.5 11.1976 6.71791 10.6737 7.11994C10.1498 7.52197 9.77315 8.08564 9.60222 8.72354L8.15333 8.33531C8.40972 7.37846 8.97467 6.53295 9.76057 5.92991C10.5465 5.32687 11.5094 5 12.5 5C13.4906 5 14.4535 5.32687 15.2394 5.92991C16.0253 6.53295 16.5903 7.37847 16.8467 8.33532L15.3978 8.72354C15.2269 8.08564 14.8502 7.52197 14.3263 7.11994C13.8024 6.71791 13.1604 6.5 12.5 6.5Z" style="fill: var(--element-active-color)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M13 10.8662V14L21 14C21.5523 14 22 14.4477 22 15V21C22 21.5523 21.5523 22 21 22H9C5.13401 22 2 18.866 2 15C2 14.4477 2.44772 14 3 14L12 14V10.8662C11.7011 10.6933 11.5 10.3701 11.5 10C11.5 9.44772 11.9477 9 12.5 9C13.0523 9 13.5 9.44772 13.5 10C13.5 10.3701 13.2989 10.6933 13 10.8662ZM9 20C6.58104 20 4.56329 18.2823 4.10002 16H20V20H9Z" style="fill: var(--element-active-color)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 3.5C11.1792 3.5 9.8953 3.93582 8.84743 4.73988C7.79957 5.54394 7.0463 6.67129 6.70445 7.94709L5.25556 7.55886C5.68287 5.96411 6.62446 4.55492 7.93429 3.54985C9.24412 2.54478 10.849 2 12.5 2C14.151 2 15.7559 2.54478 17.0657 3.54985C18.3755 4.55492 19.3171 5.96411 19.7444 7.55886L18.2956 7.94709C17.9537 6.67129 17.2004 5.54394 16.1526 4.73988C15.1047 3.93582 13.8208 3.5 12.5 3.5Z" stroke="#1A1A1A"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 6.5C11.8396 6.5 11.1976 6.71791 10.6737 7.11994C10.1498 7.52197 9.77315 8.08564 9.60222 8.72354L8.15333 8.33531C8.40972 7.37846 8.97467 6.53295 9.76057 5.92991C10.5465 5.32687 11.5094 5 12.5 5C13.4906 5 14.4535 5.32687 15.2394 5.92991C16.0253 6.53295 16.5903 7.37847 16.8467 8.33532L15.3978 8.72354C15.2269 8.08564 14.8502 7.52197 14.3263 7.11994C13.8024 6.71791 13.1604 6.5 12.5 6.5Z" stroke="#1A1A1A"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13 10.8662V14L21 14C21.5523 14 22 14.4477 22 15V21C22 21.5523 21.5523 22 21 22H9C5.13401 22 2 18.866 2 15C2 14.4477 2.44772 14 3 14L12 14V10.8662C11.7011 10.6933 11.5 10.3701 11.5 10C11.5 9.44772 11.9477 9 12.5 9C13.0523 9 13.5 9.44772 13.5 10C13.5 10.3701 13.2989 10.6933 13 10.8662ZM9 20C6.58104 20 4.56329 18.2823 4.10002 16H20V20H9Z" stroke="#1A1A1A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 3.5C11.1792 3.5 9.8953 3.93582 8.84743 4.73988C7.79957 5.54394 7.0463 6.67129 6.70445 7.94709L5.25556 7.55886C5.68287 5.96411 6.62446 4.55492 7.93429 3.54985C9.24412 2.54478 10.849 2 12.5 2C14.151 2 15.7559 2.54478 17.0657 3.54985C18.3755 4.55492 19.3171 5.96411 19.7444 7.55886L18.2956 7.94709C17.9537 6.67129 17.2004 5.54394 16.1526 4.73988C15.1047 3.93582 13.8208 3.5 12.5 3.5Z" style="stroke: var(--element-active-color)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 6.5C11.8396 6.5 11.1976 6.71791 10.6737 7.11994C10.1498 7.52197 9.77315 8.08564 9.60222 8.72354L8.15333 8.33531C8.40972 7.37846 8.97467 6.53295 9.76057 5.92991C10.5465 5.32687 11.5094 5 12.5 5C13.4906 5 14.4535 5.32687 15.2394 5.92991C16.0253 6.53295 16.5903 7.37847 16.8467 8.33532L15.3978 8.72354C15.2269 8.08564 14.8502 7.52197 14.3263 7.11994C13.8024 6.71791 13.1604 6.5 12.5 6.5Z" style="stroke: var(--element-active-color)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 10.8662V14L21 14C21.5523 14 22 14.4477 22 15V21C22 21.5523 21.5523 22 21 22H9C5.13401 22 2 18.866 2 15C2 14.4477 2.44772 14 3 14L12 14V10.8662C11.7011 10.6933 11.5 10.3701 11.5 10C11.5 9.44772 11.9477 9 12.5 9C13.0523 9 13.5 9.44772 13.5 10C13.5 10.3701 13.2989 10.6933 13 10.8662ZM9 20C6.58104 20 4.56329 18.2823 4.10002 16H20V20H9Z" style="stroke: var(--element-active-color)"/>
 </svg>
 `;
 

package/src/icons/icon-14-alert-rectified.ts

@@ -13,7 +13,7 @@ export class Obi14AlertRectified extends LitElement {
 
   private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M2.19851 19.0799C1.58095 20.1918 2.47909 21.5 3.86001 21.5H20.14C21.5209 21.5 22.4191 20.1918 21.8015 19.0799L13.6615 4.4244C12.9769 3.19187 11.0231 3.19187 10.3385 4.4244L2.19851 19.0799Z" style="fill: var(--indent-enabled-border-color)" />
-<path d="M3.86001 21C3.33109 21 2.91693 20.7515 2.69204 20.4239C2.4702 20.1008 2.42657 19.699 2.63561 19.3227L10.7756 4.66718C11.0139 4.23815 11.4869 4 12 4C12.5131 4 12.9861 4.23814 13.2244 4.66717L21.3644 19.3227C21.5734 19.699 21.5298 20.1008 21.308 20.4239C21.0831 20.7515 20.6689 21 20.14 21H3.86001Z" stroke="black" stroke-opacity="0.05"/>
+<path d="M3.86001 21C3.33109 21 2.91693 20.7515 2.69204 20.4239C2.4702 20.1008 2.42657 19.699 2.63561 19.3227L10.7756 4.66718C11.0139 4.23815 11.4869 4 12 4C12.5131 4 12.9861 4.23814 13.2244 4.66717L21.3644 19.3227C21.5734 19.699 21.5298 20.1008 21.308 20.4239C21.0831 20.7515 20.6689 21 20.14 21H3.86001Z" style="stroke: var(--indent-enabled-border-color)" />
 </svg>
 `;