@oicl/openbridge-webcomponents 0.0.4

package/src/icons/icon-03-split-left.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-03-split-left')
+export class Obi03SplitLeft 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="M14.1672 8.25L4.5 8.25V4.5H14.1672V8.25ZM15.6672 4.5V19.5H19.5V4.5H15.6672ZM20 3C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3H20ZM4.5 9.75L14.1672 9.75V14.25H4.5V9.75ZM4.5 15.75H14.1672V19.5H4.5V15.75Z" 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="M14.1672 8.25L4.5 8.25V4.5H14.1672V8.25ZM15.6672 4.5V19.5H19.5V4.5H15.6672ZM20 3C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3H20ZM4.5 9.75L14.1672 9.75V14.25H4.5V9.75ZM4.5 15.75H14.1672V19.5H4.5V15.75Z" 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-split-left': Obi03SplitLeft;
+  }
+}

package/src/icons/icon-03-split-right.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-03-split-right')
+export class Obi03SplitRight 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="M9.56198 15.75H4.5V19.5H9.56198V15.75ZM4 21C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4ZM11.062 4.5V19.5H19.5V4.5H11.062ZM9.56198 4.5H4.5V8.25H9.56198V4.5ZM9.56198 9.75V14.25H4.5V9.75H9.56198Z" 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="M9.56198 15.75H4.5V19.5H9.56198V15.75ZM4 21C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4ZM11.062 4.5V19.5H19.5V4.5H11.062ZM9.56198 4.5H4.5V8.25H9.56198V4.5ZM9.56198 9.75V14.25H4.5V9.75H9.56198Z" 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-split-right': Obi03SplitRight;
+  }
+}

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

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-03-star-checked')
+export class Obi03StarChecked 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 2L14.9095 8.99537L22.4616 9.60081L16.7077 14.5296L18.4656 21.8992L12 17.95L5.53431 21.8992L7.29222 14.5296L1.53833 9.60081L9.09041 8.99537L12 2Z" 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 2L14.9095 8.99537L22.4616 9.60081L16.7077 14.5296L18.4656 21.8992L12 17.95L5.53431 21.8992L7.29222 14.5296L1.53833 9.60081L9.09041 8.99537L12 2Z" 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-star-checked': Obi03StarChecked;
+  }
+}

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

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-03-star-unchecked')
+export class Obi03StarUnchecked 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 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"/>
+</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 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"/>
+</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-star-unchecked': Obi03StarUnchecked;
+  }
+}

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

@@ -0,0 +1,44 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-03-support')
+export class Obi03Support 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="M11 18H13V16H11V18Z" fill="currentColor"/>
+<path d="M12 6C9.79 6 8 7.79 8 10H10C10 8.9 10.9 8 12 8C13.1 8 14 8.9 14 10C14 12 11 11.75 11 15H13C13 12.75 16 12.5 16 10C16 7.79 14.21 6 12 6Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 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="M11 18H13V16H11V18Z" style="fill: var(--element-active-color)"/>
+<path d="M12 6C9.79 6 8 7.79 8 10H10C10 8.9 10.9 8 12 8C13.1 8 14 8.9 14 10C14 12 11 11.75 11 15H13C13 12.75 16 12.5 16 10C16 7.79 14.21 6 12 6Z" style="fill: var(--element-active-color)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 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-03-support': Obi03Support;
+  }
+}

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

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-03-table')
+export class Obi03Table 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="M3 19.5V4.5C3 3.67157 3.67157 3 4.5 3H19.5C20.3284 3 21 3.67157 21 4.5V19.5C21 20.3284 20.3284 21 19.5 21H4.5C3.67157 21 3 20.3284 3 19.5ZM4.5 8.25V4.5L19.5 4.5V8.25H4.5ZM4.5 9.75V14.25H19.5V9.75H4.5ZM19.5 15.75H4.5V19.5H19.5V15.75Z" 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="M3 19.5V4.5C3 3.67157 3.67157 3 4.5 3H19.5C20.3284 3 21 3.67157 21 4.5V19.5C21 20.3284 20.3284 21 19.5 21H4.5C3.67157 21 3 20.3284 3 19.5ZM4.5 8.25V4.5L19.5 4.5V8.25H4.5ZM4.5 9.75V14.25H19.5V9.75H4.5ZM19.5 15.75H4.5V19.5H19.5V15.75Z" 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-table': Obi03Table;
+  }
+}

package/src/icons/icon-03-volume-high.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-03-volume-high')
+export class Obi03VolumeHigh 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="M14 20.7251V18.6751C15.5 18.2418 16.7083 17.4084 17.625 16.1751C18.5417 14.9418 19 13.5418 19 11.9751C19 10.4084 18.5417 9.00843 17.625 7.7751C16.7083 6.54176 15.5 5.70843 14 5.2751V3.2251C16.0667 3.69176 17.75 4.73743 19.05 6.3621C20.35 7.98743 21 9.85843 21 11.9751C21 14.0918 20.35 15.9624 19.05 17.5871C17.75 19.2124 16.0667 20.2584 14 20.7251ZM3 15.0001V9.0001H7L12 4.0001V20.0001L7 15.0001H3ZM14 16.0001V7.9501C14.7833 8.31676 15.396 8.86677 15.838 9.6001C16.2793 10.3334 16.5 11.1334 16.5 12.0001C16.5 12.8501 16.2793 13.6374 15.838 14.3621C15.396 15.0874 14.7833 15.6334 14 16.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 d="M14 20.7251V18.6751C15.5 18.2418 16.7083 17.4084 17.625 16.1751C18.5417 14.9418 19 13.5418 19 11.9751C19 10.4084 18.5417 9.00843 17.625 7.7751C16.7083 6.54176 15.5 5.70843 14 5.2751V3.2251C16.0667 3.69176 17.75 4.73743 19.05 6.3621C20.35 7.98743 21 9.85843 21 11.9751C21 14.0918 20.35 15.9624 19.05 17.5871C17.75 19.2124 16.0667 20.2584 14 20.7251ZM3 15.0001V9.0001H7L12 4.0001V20.0001L7 15.0001H3ZM14 16.0001V7.9501C14.7833 8.31676 15.396 8.86677 15.838 9.6001C16.2793 10.3334 16.5 11.1334 16.5 12.0001C16.5 12.8501 16.2793 13.6374 15.838 14.3621C15.396 15.0874 14.7833 15.6334 14 16.0001Z" 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-volume-high': Obi03VolumeHigh;
+  }
+}

package/src/icons/icon-03-volume-low.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-03-volume-low')
+export class Obi03VolumeLow 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 15V9H9L14 4V20L9 15H5ZM16 16V7.95C16.75 8.3 17.354 8.84167 17.812 9.575C18.2707 10.3083 18.5 11.1167 18.5 12C18.5 12.8833 18.2707 13.6833 17.812 14.4C17.354 15.1167 16.75 15.65 16 16Z" 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 15V9H9L14 4V20L9 15H5ZM16 16V7.95C16.75 8.3 17.354 8.84167 17.812 9.575C18.2707 10.3083 18.5 11.1167 18.5 12C18.5 12.8833 18.2707 13.6833 17.812 14.4C17.354 15.1167 16.75 15.65 16 16Z" 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-volume-low': Obi03VolumeLow;
+  }
+}

package/src/icons/icon-03-volume-off.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-03-volume-off')
+export class Obi03VolumeOff 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="M20.8 21.5998L17.775 18.5748C17.3584 18.8415 16.9167 19.0708 16.45 19.2628C15.9834 19.4541 15.5 19.6081 15 19.7248V17.6748C15.2334 17.5915 15.4627 17.5081 15.688 17.4248C15.9127 17.3415 16.125 17.2415 16.325 17.1248L13 13.7998V18.9998L8.00002 13.9998H4.00002V7.9998H7.20002L2.40002 3.1998L3.80002 1.7998L22.2 20.1998L20.8 21.5998ZM20.6 15.7998L19.15 14.3498C19.4334 13.8331 19.646 13.2915 19.788 12.7248C19.9294 12.1581 20 11.5748 20 10.9748C20 9.40814 19.5417 8.00814 18.625 6.77481C17.7084 5.54147 16.5 4.70814 15 4.2748V2.2248C17.0667 2.69147 18.75 3.73714 20.05 5.3618C21.35 6.98714 22 8.85814 22 10.9748C22 11.8581 21.8794 12.7081 21.638 13.5248C21.396 14.3415 21.05 15.0998 20.6 15.7998ZM17.25 12.4498L15 10.1998V6.9498C15.7834 7.31647 16.396 7.86647 16.838 8.5998C17.2794 9.33314 17.5 10.1331 17.5 10.9998C17.5 11.2498 17.4794 11.4958 17.438 11.7378C17.396 11.9791 17.3334 12.2165 17.25 12.4498ZM13 8.1998L10.4 5.5998L13 2.9998V8.1998Z" 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="M20.8 21.5998L17.775 18.5748C17.3584 18.8415 16.9167 19.0708 16.45 19.2628C15.9834 19.4541 15.5 19.6081 15 19.7248V17.6748C15.2334 17.5915 15.4627 17.5081 15.688 17.4248C15.9127 17.3415 16.125 17.2415 16.325 17.1248L13 13.7998V18.9998L8.00002 13.9998H4.00002V7.9998H7.20002L2.40002 3.1998L3.80002 1.7998L22.2 20.1998L20.8 21.5998ZM20.6 15.7998L19.15 14.3498C19.4334 13.8331 19.646 13.2915 19.788 12.7248C19.9294 12.1581 20 11.5748 20 10.9748C20 9.40814 19.5417 8.00814 18.625 6.77481C17.7084 5.54147 16.5 4.70814 15 4.2748V2.2248C17.0667 2.69147 18.75 3.73714 20.05 5.3618C21.35 6.98714 22 8.85814 22 10.9748C22 11.8581 21.8794 12.7081 21.638 13.5248C21.396 14.3415 21.05 15.0998 20.6 15.7998ZM17.25 12.4498L15 10.1998V6.9498C15.7834 7.31647 16.396 7.86647 16.838 8.5998C17.2794 9.33314 17.5 10.1331 17.5 10.9998C17.5 11.2498 17.4794 11.4958 17.438 11.7378C17.396 11.9791 17.3334 12.2165 17.25 12.4498ZM13 8.1998L10.4 5.5998L13 2.9998V8.1998Z" 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-volume-off': Obi03VolumeOff;
+  }
+}

package/src/icons/icon-04-brilliance-high.ts

@@ -0,0 +1,56 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-04-brilliance-high')
+export class Obi04BrillianceHigh 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="M11 2H13V6H11V2Z" fill="currentColor"/>
+<path d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" fill="currentColor"/>
+<path d="M19.7782 5.63604L18.364 4.22182L15.5355 7.05025L16.9497 8.46447L19.7782 5.63604Z" fill="currentColor"/>
+<path d="M2 13V11H6V13H2Z" fill="currentColor"/>
+<path d="M5.63605 4.22183L4.22183 5.63604L7.05026 8.46447L8.46447 7.05025L5.63605 4.22183Z" fill="currentColor"/>
+<path d="M13 18V22H11V18H13Z" fill="currentColor"/>
+<path d="M8.46446 16.9498L7.05025 15.5355L4.22182 18.364L5.63603 19.7782L8.46446 16.9498Z" fill="currentColor"/>
+<path d="M18 11H22V13H18V11Z" fill="currentColor"/>
+<path d="M16.9498 15.5355L15.5355 16.9497L18.364 19.7782L19.7782 18.364L16.9498 15.5355Z" 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="M11 2H13V6H11V2Z" style="fill: var(--element-active-color)"/>
+<path d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" style="fill: var(--element-active-color)"/>
+<path d="M19.7782 5.63604L18.364 4.22182L15.5355 7.05025L16.9497 8.46447L19.7782 5.63604Z" style="fill: var(--element-active-color)"/>
+<path d="M2 13V11H6V13H2Z" style="fill: var(--element-active-color)"/>
+<path d="M5.63605 4.22183L4.22183 5.63604L7.05026 8.46447L8.46447 7.05025L5.63605 4.22183Z" style="fill: var(--element-active-color)"/>
+<path d="M13 18V22H11V18H13Z" style="fill: var(--element-active-color)"/>
+<path d="M8.46446 16.9498L7.05025 15.5355L4.22182 18.364L5.63603 19.7782L8.46446 16.9498Z" style="fill: var(--element-active-color)"/>
+<path d="M18 11H22V13H18V11Z" style="fill: var(--element-active-color)"/>
+<path d="M16.9498 15.5355L15.5355 16.9497L18.364 19.7782L19.7782 18.364L16.9498 15.5355Z" 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-04-brilliance-high': Obi04BrillianceHigh;
+  }
+}

package/src/icons/icon-04-brilliance-low.ts

@@ -0,0 +1,56 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-04-brilliance-low')
+export class Obi04BrillianceLow 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="M11 4H13V6H11V4Z" fill="currentColor"/>
+<path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" fill="currentColor"/>
+<path d="M18.364 7.05025L16.9497 5.63604L15.5355 7.05025L16.9497 8.46447L18.364 7.05025Z" fill="currentColor"/>
+<path d="M4 13V11H6L6 13H4Z" fill="currentColor"/>
+<path d="M7.05025 5.63604L5.63604 7.05025L7.05025 8.46446L8.46447 7.05025L7.05025 5.63604Z" fill="currentColor"/>
+<path d="M13 18V20H11V18H13Z" fill="currentColor"/>
+<path d="M8.46447 16.9498L7.05025 15.5355L5.63604 16.9498L7.05025 18.364L8.46447 16.9498Z" fill="currentColor"/>
+<path d="M18 11H20V13H18V11Z" fill="currentColor"/>
+<path d="M16.9498 15.5355L15.5355 16.9497L16.9498 18.364L18.364 16.9497L16.9498 15.5355Z" 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="M11 4H13V6H11V4Z" style="fill: var(--element-active-color)"/>
+<path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" style="fill: var(--element-active-color)"/>
+<path d="M18.364 7.05025L16.9497 5.63604L15.5355 7.05025L16.9497 8.46447L18.364 7.05025Z" style="fill: var(--element-active-color)"/>
+<path d="M4 13V11H6L6 13H4Z" style="fill: var(--element-active-color)"/>
+<path d="M7.05025 5.63604L5.63604 7.05025L7.05025 8.46446L8.46447 7.05025L7.05025 5.63604Z" style="fill: var(--element-active-color)"/>
+<path d="M13 18V20H11V18H13Z" style="fill: var(--element-active-color)"/>
+<path d="M8.46447 16.9498L7.05025 15.5355L5.63604 16.9498L7.05025 18.364L8.46447 16.9498Z" style="fill: var(--element-active-color)"/>
+<path d="M18 11H20V13H18V11Z" style="fill: var(--element-active-color)"/>
+<path d="M16.9498 15.5355L15.5355 16.9497L16.9498 18.364L18.364 16.9497L16.9498 15.5355Z" 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-04-brilliance-low': Obi04BrillianceLow;
+  }
+}

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

@@ -0,0 +1,52 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-04-colorcalibrated')
+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"/>
+</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)"/>
+</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-04-colorcalibrated': Obi04Colorcalibrated;
+  }
+}

package/src/icons/icon-04-day-bright.ts

@@ -0,0 +1,56 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-04-day-bright')
+export class Obi04DayBright 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="M11 1V5H13V1H11Z" fill="currentColor"/>
+<path d="M16.275 6.375L17.65 7.75L20.475 4.925L19.075 3.5L16.275 6.375Z" fill="currentColor"/>
+<path d="M23 11H19V13H23V11Z" fill="currentColor"/>
+<path d="M11 19V23H13V19H11Z" fill="currentColor"/>
+<path d="M4.925 3.525L3.5 4.925L6.35 7.7L7.75 6.35L4.925 3.525Z" fill="currentColor"/>
+<path d="M16.275 17.625L19.05 20.5L20.475 19.025L17.625 16.275L16.275 17.625Z" fill="currentColor"/>
+<path d="M1 11V13H5V11H1Z" fill="currentColor"/>
+<path d="M3.525 19.075L4.925 20.5L7.775 17.65L7.05 16.95L6.325 16.275L3.525 19.075Z" fill="currentColor"/>
+<path d="M12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z" 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="M11 1V5H13V1H11Z" fill="currentColor"/>
+<path d="M16.275 6.375L17.65 7.75L20.475 4.925L19.075 3.5L16.275 6.375Z" fill="currentColor"/>
+<path d="M23 11H19V13H23V11Z" fill="currentColor"/>
+<path d="M11 19V23H13V19H11Z" fill="currentColor"/>
+<path d="M4.925 3.525L3.5 4.925L6.35 7.7L7.75 6.35L4.925 3.525Z" fill="currentColor"/>
+<path d="M16.275 17.625L19.05 20.5L20.475 19.025L17.625 16.275L16.275 17.625Z" fill="currentColor"/>
+<path d="M1 11V13H5V11H1Z" fill="currentColor"/>
+<path d="M3.525 19.075L4.925 20.5L7.775 17.65L7.05 16.95L6.325 16.275L3.525 19.075Z" fill="currentColor"/>
+<path d="M12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z" 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-04-day-bright': Obi04DayBright;
+  }
+}