@oicl/openbridge-webcomponents 0.0.4

package/src/icons/icon-02-unfold-less.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-02-unfold-less')
+export class Obi02UnfoldLess 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="M11.99 8.17L8.82003 5L7.41003 6.41L11.99 11L16.58 6.41L15.16 5L11.99 8.17ZM12.01 15.83L15.18 19L16.59 17.59L12.01 13L7.42003 17.59L8.84003 19L12.01 15.83Z" 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="M11.99 8.17L8.82003 5L7.41003 6.41L11.99 11L16.58 6.41L15.16 5L11.99 8.17ZM12.01 15.83L15.18 19L16.59 17.59L12.01 13L7.42003 17.59L8.84003 19L12.01 15.83Z" 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-unfold-less': Obi02UnfoldLess;
+  }
+}

package/src/icons/icon-02-unfold-more.ts

@@ -0,0 +1,42 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-02-unfold-more')
+export class Obi02UnfoldMore 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 6.83L15.17 10L16.58 8.59L12 4L7.41003 8.59L8.83003 10L12 6.83Z" fill="currentColor"/>
+<path d="M12 17.17L8.83004 14L7.42004 15.41L12 20L16.59 15.41L15.17 14L12 17.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="M12 6.83L15.17 10L16.58 8.59L12 4L7.41003 8.59L8.83003 10L12 6.83Z" style="fill: var(--element-active-color)"/>
+<path d="M12 17.17L8.83004 14L7.42004 15.41L12 20L16.59 15.41L15.17 14L12 17.17Z" 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-unfold-more': Obi02UnfoldMore;
+  }
+}

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

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-03-configure')
+export class Obi03Configure 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="M3 8V10H13V8H3ZM7 12V14H3V16H7V18H9V12H7ZM21 16V14H11V16H21ZM15 12H17V10H21V8H17V6H15V12Z" 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="M3 8V10H13V8H3ZM7 12V14H3V16H7V18H9V12H7ZM21 16V14H11V16H21ZM15 12H17V10H21V8H17V6H15V12Z" 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-configure': Obi03Configure;
+  }
+}

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

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-03-diagnostic')
+export class Obi03Diagnostic 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.88 17.47C20.32 16.77 20.58 15.96 20.58 15.08C20.58 12.59 18.57 10.58 16.08 10.58C13.59 10.58 11.58 12.59 11.58 15.08C11.58 17.57 13.59 19.58 16.07 19.58C16.95 19.58 17.77 19.32 18.46 18.88L21.58 22L23 20.58L19.88 17.47ZM16.08 17.58C14.7 17.58 13.58 16.46 13.58 15.08C13.58 13.7 14.7 12.58 16.08 12.58C17.46 12.58 18.58 13.7 18.58 15.08C18.58 16.46 17.46 17.58 16.08 17.58ZM15.72 9.08C14.98 9.1 14.27 9.26 13.62 9.53L13.07 8.7L9.27 14.88L6.26 11.36L2.63 17.17L1 16L6 8L9 11.5L13 5L15.72 9.08ZM18.31 9.58C17.67 9.3 16.98 9.13 16.26 9.09L21.38 1L23 2.18L18.31 9.58Z" 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.88 17.47C20.32 16.77 20.58 15.96 20.58 15.08C20.58 12.59 18.57 10.58 16.08 10.58C13.59 10.58 11.58 12.59 11.58 15.08C11.58 17.57 13.59 19.58 16.07 19.58C16.95 19.58 17.77 19.32 18.46 18.88L21.58 22L23 20.58L19.88 17.47ZM16.08 17.58C14.7 17.58 13.58 16.46 13.58 15.08C13.58 13.7 14.7 12.58 16.08 12.58C17.46 12.58 18.58 13.7 18.58 15.08C18.58 16.46 17.46 17.58 16.08 17.58ZM15.72 9.08C14.98 9.1 14.27 9.26 13.62 9.53L13.07 8.7L9.27 14.88L6.26 11.36L2.63 17.17L1 16L6 8L9 11.5L13 5L15.72 9.08ZM18.31 9.58C17.67 9.3 16.98 9.13 16.26 9.09L21.38 1L23 2.18L18.31 9.58Z" 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-diagnostic': Obi03Diagnostic;
+  }
+}

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

@@ -0,0 +1,44 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-03-filter')
+export class Obi03Filter 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="M8.73244 4H22V6H8.73244C8.38663 6.5978 7.74028 7 7 7C6.25972 7 5.61337 6.5978 5.26756 6H2V4H5.26756C5.61337 3.4022 6.25972 3 7 3C7.74028 3 8.38663 3.4022 8.73244 4Z" fill="currentColor"/>
+<path d="M19.7324 11H22V13H19.7324C19.3866 13.5978 18.7403 14 18 14C17.2597 14 16.6134 13.5978 16.2676 13H2V11H16.2676C16.6134 10.4022 17.2597 10 18 10C18.7403 10 19.3866 10.4022 19.7324 11Z" fill="currentColor"/>
+<path d="M8.73244 18H22V20H8.73244C8.38663 20.5978 7.74028 21 7 21C6.25972 21 5.61337 20.5978 5.26756 20H2V18H5.26756C5.61337 17.4022 6.25972 17 7 17C7.74028 17 8.38663 17.4022 8.73244 18Z" 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="M8.73244 4H22V6H8.73244C8.38663 6.5978 7.74028 7 7 7C6.25972 7 5.61337 6.5978 5.26756 6H2V4H5.26756C5.61337 3.4022 6.25972 3 7 3C7.74028 3 8.38663 3.4022 8.73244 4Z" style="fill: var(--element-active-color)"/>
+<path d="M19.7324 11H22V13H19.7324C19.3866 13.5978 18.7403 14 18 14C17.2597 14 16.6134 13.5978 16.2676 13H2V11H16.2676C16.6134 10.4022 17.2597 10 18 10C18.7403 10 19.3866 10.4022 19.7324 11Z" style="fill: var(--element-active-color)"/>
+<path d="M8.73244 18H22V20H8.73244C8.38663 20.5978 7.74028 21 7 21C6.25972 21 5.61337 20.5978 5.26756 20H2V18H5.26756C5.61337 17.4022 6.25972 17 7 17C7.74028 17 8.38663 17.4022 8.73244 18Z" 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-filter': Obi03Filter;
+  }
+}

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

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

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

@@ -0,0 +1,42 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-03-monitoring')
+export class Obi03Monitoring 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="M8.03274 7.04951L9.9706 10.4408L10.691 9H19V10H11.309L10.0294 12.5592L7.96726 8.95049L7.26759 10H6V9H6.73241L8.03274 7.04951Z" fill="currentColor"/>
+<path d="M14.71 14H15.5L20.49 19L19 20.49L14 15.5V14.71L13.73 14.43C12.59 15.41 11.11 16 9.5 16C5.91 16 3 13.09 3 9.5C3 5.91 5.91 3 9.5 3C12.5737 3 15.149 5.13321 15.8261 8H13.7451C13.1289 6.25017 11.4637 5 9.5 5C7.01 5 5 7.01 5 9.5C5 11.99 7.01 14 9.5 14C11.4637 14 13.1289 12.7498 13.7451 11H15.825C15.5821 12.0231 15.0961 12.9551 14.43 13.73L14.71 14Z" 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="M8.03274 7.04951L9.9706 10.4408L10.691 9H19V10H11.309L10.0294 12.5592L7.96726 8.95049L7.26759 10H6V9H6.73241L8.03274 7.04951Z" style="fill: var(--element-active-color)"/>
+<path d="M14.71 14H15.5L20.49 19L19 20.49L14 15.5V14.71L13.73 14.43C12.59 15.41 11.11 16 9.5 16C5.91 16 3 13.09 3 9.5C3 5.91 5.91 3 9.5 3C12.5737 3 15.149 5.13321 15.8261 8H13.7451C13.1289 6.25017 11.4637 5 9.5 5C7.01 5 5 7.01 5 9.5C5 11.99 7.01 14 9.5 14C11.4637 14 13.1289 12.7498 13.7451 11H15.825C15.5821 12.0231 15.0961 12.9551 14.43 13.73L14.71 14Z" 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-monitoring': Obi03Monitoring;
+  }
+}

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

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-03-pin-checked')
+export class Obi03PinChecked 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="M16 9V4H17C17.55 4 18 3.55 18 3C18 2.45 17.55 2 17 2H7C6.45 2 6 2.45 6 3C6 3.55 6.45 4 7 4H8V9C8 10.66 6.66 12 5 12V14H10.97V21L11.97 22L12.97 21V14H19V12C17.34 12 16 10.66 16 9Z" 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="M16 9V4H17C17.55 4 18 3.55 18 3C18 2.45 17.55 2 17 2H7C6.45 2 6 2.45 6 3C6 3.55 6.45 4 7 4H8V9C8 10.66 6.66 12 5 12V14H10.97V21L11.97 22L12.97 21V14H19V12C17.34 12 16 10.66 16 9Z" 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-pin-checked': Obi03PinChecked;
+  }
+}

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

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-03-pin-unchecked')
+export class Obi03PinUnchecked 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 4V9C14 10.12 14.37 11.16 15 12H9C9.65 11.14 10 10.1 10 9V4H14ZM17 2H7C6.45 2 6 2.45 6 3C6 3.55 6.45 4 7 4H8V9C8 10.66 6.66 12 5 12V14H10.97V21L11.97 22L12.97 21V14H19V12C17.34 12 16 10.66 16 9V4H17C17.55 4 18 3.55 18 3C18 2.45 17.55 2 17 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="M14 4V9C14 10.12 14.37 11.16 15 12H9C9.65 11.14 10 10.1 10 9V4H14ZM17 2H7C6.45 2 6 2.45 6 3C6 3.55 6.45 4 7 4H8V9C8 10.66 6.66 12 5 12V14H10.97V21L11.97 22L12.97 21V14H19V12C17.34 12 16 10.66 16 9V4H17C17.55 4 18 3.55 18 3C18 2.45 17.55 2 17 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-pin-unchecked': Obi03PinUnchecked;
+  }
+}

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

@@ -0,0 +1,42 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-03-printscreen')
+export class Obi03Printscreen 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 3H15L16.83 5H20C21.1 5 22 5.9 22 7V19C22 20.1 21.1 21 20 21H4C2.9 21 2 20.1 2 19V7C2 5.9 2.9 5 4 5H7.17L9 3ZM14.12 5L15.95 7H20V19H4V7H8.05L9.88 5H14.12Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 13C7 10.24 9.24 8 12 8C14.76 8 17 10.24 17 13C17 15.76 14.76 18 12 18C9.24 18 7 15.76 7 13ZM15 13C15 11.35 13.65 10 12 10C10.35 10 9 11.35 9 13C9 14.65 10.35 16 12 16C13.65 16 15 14.65 15 13Z" 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 3H15L16.83 5H20C21.1 5 22 5.9 22 7V19C22 20.1 21.1 21 20 21H4C2.9 21 2 20.1 2 19V7C2 5.9 2.9 5 4 5H7.17L9 3ZM14.12 5L15.95 7H20V19H4V7H8.05L9.88 5H14.12Z" style="fill: var(--element-active-color)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 13C7 10.24 9.24 8 12 8C14.76 8 17 10.24 17 13C17 15.76 14.76 18 12 18C9.24 18 7 15.76 7 13ZM15 13C15 11.35 13.65 10 12 10C10.35 10 9 11.35 9 13C9 14.65 10.35 16 12 16C13.65 16 15 14.65 15 13Z" 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-printscreen': Obi03Printscreen;
+  }
+}

package/src/icons/icon-03-settings-default-alt1.ts

@@ -0,0 +1,44 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-03-settings-default-alt1')
+export class Obi03SettingsDefaultAlt1 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.7191 11.6C17.7191 11.7904 17.7018 11.9696 17.6788 12.1488L18.8935 13.0728C19.0029 13.1568 19.0317 13.308 18.9626 13.4312L17.8112 15.3688C17.7421 15.492 17.5924 15.5424 17.46 15.492L16.0265 14.932C15.7271 15.1504 15.4047 15.3408 15.0536 15.4808L14.8348 16.9648C14.8175 17.0992 14.6966 17.2 14.5527 17.2H12.2499C12.1059 17.2 11.985 17.0992 11.9678 16.9648L11.749 15.4808C11.3978 15.3408 11.0754 15.156 10.776 14.932L9.34252 15.492C9.21586 15.5368 9.06042 15.492 8.99133 15.3688L7.83991 13.4312C7.77083 13.308 7.79962 13.1568 7.909 13.0728L9.12375 12.1488C9.10072 11.9696 9.08345 11.7848 9.08345 11.6C9.08345 11.4152 9.10072 11.2304 9.12375 11.0512L7.909 10.1272C7.79962 10.0432 7.76507 9.892 7.83991 9.7688L8.99133 7.8312C9.06042 7.708 9.2101 7.6576 9.34252 7.708L10.776 8.268C11.0754 8.0496 11.3978 7.8592 11.749 7.7192L11.9678 6.2352C11.985 6.1008 12.1059 6 12.2499 6H14.5527C14.6966 6 14.8175 6.1008 14.8348 6.2352L15.0536 7.7192C15.4047 7.8592 15.7271 8.044 16.0265 8.268L17.46 7.708C17.5867 7.6632 17.7421 7.708 17.8112 7.8312L18.9626 9.7688C19.0317 9.892 19.0029 10.0432 18.8935 10.1272L17.6788 11.0512C17.7018 11.2304 17.7191 11.4096 17.7191 11.6ZM11.3863 11.6C11.3863 12.6808 12.2901 13.56 13.4013 13.56C14.5124 13.56 15.4163 12.6808 15.4163 11.6C15.4163 10.5192 14.5124 9.64 13.4013 9.64C12.2901 9.64 11.3863 10.5192 11.3863 11.6Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.37656 18.4C9.37656 18.5224 9.36546 18.6376 9.35065 18.7528L10.1316 19.3468C10.2019 19.4008 10.2204 19.498 10.176 19.5772L9.43578 20.8228C9.39136 20.902 9.29514 20.9344 9.21002 20.902L8.28847 20.542C8.09602 20.6824 7.88876 20.8048 7.663 20.8948L7.52236 21.8488C7.51126 21.9352 7.43354 22 7.34102 22H5.86062C5.76809 22 5.69037 21.9352 5.67927 21.8488L5.53863 20.8948C5.31287 20.8048 5.10562 20.686 4.91317 20.542L3.99162 20.902C3.9102 20.9308 3.81027 20.902 3.76586 20.8228L3.02566 19.5772C2.98125 19.498 2.99975 19.4008 3.07007 19.3468L3.85098 18.7528C3.83618 18.6376 3.82507 18.5188 3.82507 18.4C3.82507 18.2812 3.83618 18.1624 3.85098 18.0472L3.07007 17.4532C2.99975 17.3992 2.97755 17.302 3.02566 17.2228L3.76586 15.9772C3.81027 15.898 3.9065 15.8656 3.99162 15.898L4.91317 16.258C5.10562 16.1176 5.31287 15.9952 5.53863 15.9052L5.67927 14.9512C5.69037 14.8648 5.76809 14.8 5.86062 14.8H7.34102C7.43354 14.8 7.51126 14.8648 7.52236 14.9512L7.663 15.9052C7.88876 15.9952 8.09602 16.114 8.28847 16.258L9.21002 15.898C9.29144 15.8692 9.39136 15.898 9.43578 15.9772L10.176 17.2228C10.2204 17.302 10.2019 17.3992 10.1316 17.4532L9.35065 18.0472C9.36546 18.1624 9.37656 18.2776 9.37656 18.4ZM5.30547 18.4C5.30547 19.0948 5.88652 19.66 6.60081 19.66C7.31511 19.66 7.89616 19.0948 7.89616 18.4C7.89616 17.7052 7.31511 17.14 6.60081 17.14C5.88652 17.14 5.30547 17.7052 5.30547 18.4Z" fill="currentColor"/>
+<path d="M9.18657 5.19522C10.3575 4.43895 11.7526 4 13.2502 4C16.4834 4 19.2387 6.04581 20.2923 8.91354L22.1764 8.24067C20.8464 4.59938 17.3519 2 13.2502 2C11.2507 2 9.39543 2.61775 7.8649 3.6728L6 2L5.13507 7.39265L11 7L9.18657 5.19522Z" 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.7191 11.6C17.7191 11.7904 17.7018 11.9696 17.6788 12.1488L18.8935 13.0728C19.0029 13.1568 19.0317 13.308 18.9626 13.4312L17.8112 15.3688C17.7421 15.492 17.5924 15.5424 17.46 15.492L16.0265 14.932C15.7271 15.1504 15.4047 15.3408 15.0536 15.4808L14.8348 16.9648C14.8175 17.0992 14.6966 17.2 14.5527 17.2H12.2499C12.1059 17.2 11.985 17.0992 11.9678 16.9648L11.749 15.4808C11.3978 15.3408 11.0754 15.156 10.776 14.932L9.34252 15.492C9.21586 15.5368 9.06042 15.492 8.99133 15.3688L7.83991 13.4312C7.77083 13.308 7.79962 13.1568 7.909 13.0728L9.12375 12.1488C9.10072 11.9696 9.08345 11.7848 9.08345 11.6C9.08345 11.4152 9.10072 11.2304 9.12375 11.0512L7.909 10.1272C7.79962 10.0432 7.76507 9.892 7.83991 9.7688L8.99133 7.8312C9.06042 7.708 9.2101 7.6576 9.34252 7.708L10.776 8.268C11.0754 8.0496 11.3978 7.8592 11.749 7.7192L11.9678 6.2352C11.985 6.1008 12.1059 6 12.2499 6H14.5527C14.6966 6 14.8175 6.1008 14.8348 6.2352L15.0536 7.7192C15.4047 7.8592 15.7271 8.044 16.0265 8.268L17.46 7.708C17.5867 7.6632 17.7421 7.708 17.8112 7.8312L18.9626 9.7688C19.0317 9.892 19.0029 10.0432 18.8935 10.1272L17.6788 11.0512C17.7018 11.2304 17.7191 11.4096 17.7191 11.6ZM11.3863 11.6C11.3863 12.6808 12.2901 13.56 13.4013 13.56C14.5124 13.56 15.4163 12.6808 15.4163 11.6C15.4163 10.5192 14.5124 9.64 13.4013 9.64C12.2901 9.64 11.3863 10.5192 11.3863 11.6Z" style="fill: var(--element-active-color)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.37656 18.4C9.37656 18.5224 9.36546 18.6376 9.35065 18.7528L10.1316 19.3468C10.2019 19.4008 10.2204 19.498 10.176 19.5772L9.43578 20.8228C9.39136 20.902 9.29514 20.9344 9.21002 20.902L8.28847 20.542C8.09602 20.6824 7.88876 20.8048 7.663 20.8948L7.52236 21.8488C7.51126 21.9352 7.43354 22 7.34102 22H5.86062C5.76809 22 5.69037 21.9352 5.67927 21.8488L5.53863 20.8948C5.31287 20.8048 5.10562 20.686 4.91317 20.542L3.99162 20.902C3.9102 20.9308 3.81027 20.902 3.76586 20.8228L3.02566 19.5772C2.98125 19.498 2.99975 19.4008 3.07007 19.3468L3.85098 18.7528C3.83618 18.6376 3.82507 18.5188 3.82507 18.4C3.82507 18.2812 3.83618 18.1624 3.85098 18.0472L3.07007 17.4532C2.99975 17.3992 2.97755 17.302 3.02566 17.2228L3.76586 15.9772C3.81027 15.898 3.9065 15.8656 3.99162 15.898L4.91317 16.258C5.10562 16.1176 5.31287 15.9952 5.53863 15.9052L5.67927 14.9512C5.69037 14.8648 5.76809 14.8 5.86062 14.8H7.34102C7.43354 14.8 7.51126 14.8648 7.52236 14.9512L7.663 15.9052C7.88876 15.9952 8.09602 16.114 8.28847 16.258L9.21002 15.898C9.29144 15.8692 9.39136 15.898 9.43578 15.9772L10.176 17.2228C10.2204 17.302 10.2019 17.3992 10.1316 17.4532L9.35065 18.0472C9.36546 18.1624 9.37656 18.2776 9.37656 18.4ZM5.30547 18.4C5.30547 19.0948 5.88652 19.66 6.60081 19.66C7.31511 19.66 7.89616 19.0948 7.89616 18.4C7.89616 17.7052 7.31511 17.14 6.60081 17.14C5.88652 17.14 5.30547 17.7052 5.30547 18.4Z" style="fill: var(--element-active-color)"/>
+<path d="M9.18657 5.19522C10.3575 4.43895 11.7526 4 13.2502 4C16.4834 4 19.2387 6.04581 20.2923 8.91354L22.1764 8.24067C20.8464 4.59938 17.3519 2 13.2502 2C11.2507 2 9.39543 2.61775 7.8649 3.6728L6 2L5.13507 7.39265L11 7L9.18657 5.19522Z" 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-settings-default-alt1': Obi03SettingsDefaultAlt1;
+  }
+}

package/src/icons/icon-03-settings-default-alt2.ts

@@ -0,0 +1,42 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-03-settings-default-alt2')
+export class Obi03SettingsDefaultAlt2 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="M16.274 10.1332L14.726 8.86676L10.9258 13.5115L9.20711 11.7929L7.79289 13.2071L11.0742 16.4885L16.274 10.1332Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.0498 18.95L17.0975 18.1659C16.414 18.7316 15.6349 19.1859 14.788 19.5008L14.4898 21.58C14.4598 21.82 14.2498 22 13.9998 22H9.99984C9.74984 22 9.53984 21.82 9.50984 21.58L9.21167 19.5007C8.36486 19.1857 7.58581 18.7315 6.90238 18.1658L4.94984 18.95C4.72984 19.03 4.45984 18.95 4.33984 18.73L2.33984 15.27C2.21984 15.05 2.26984 14.78 2.45984 14.63L4.11147 13.3384C4.03816 12.9032 4 12.4561 4 12C4 11.5439 4.03816 11.0968 4.11147 10.6616L2.45984 9.37C2.26984 9.22 2.20984 8.95 2.33984 8.73L4.33984 5.27C4.45984 5.05 4.71984 4.96 4.94984 5.05L6.90238 5.83415C7.58581 5.26848 8.36486 4.81426 9.21167 4.49934L9.50984 2.42C9.53984 2.18 9.74984 2 9.99984 2H13.9998C14.2498 2 14.4598 2.18 14.4898 2.42L14.788 4.49921C15.6349 4.81412 16.414 5.26836 17.0975 5.83406L19.0498 5.05C19.2698 4.97 19.5398 5.05 19.6598 5.27L21.6598 8.73C21.7798 8.95 21.7298 9.22 21.5398 9.37L19.8885 10.6613C19.9618 11.0966 20 11.5439 20 12C20 12.4561 19.9618 12.9034 19.8885 13.3387L21.5398 14.63C21.7298 14.78 21.7798 15.05 21.6598 15.27L19.6598 18.73C19.5398 18.95 19.2798 19.04 19.0498 18.95ZM12 17.5C15.0376 17.5 17.5 15.0376 17.5 12C17.5 8.96243 15.0376 6.5 12 6.5C8.96243 6.5 6.5 8.96243 6.5 12C6.5 15.0376 8.96243 17.5 12 17.5Z" 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="M16.274 10.1332L14.726 8.86676L10.9258 13.5115L9.20711 11.7929L7.79289 13.2071L11.0742 16.4885L16.274 10.1332Z" style="fill: var(--element-active-color)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.0498 18.95L17.0975 18.1659C16.414 18.7316 15.6349 19.1859 14.788 19.5008L14.4898 21.58C14.4598 21.82 14.2498 22 13.9998 22H9.99984C9.74984 22 9.53984 21.82 9.50984 21.58L9.21167 19.5007C8.36486 19.1857 7.58581 18.7315 6.90238 18.1658L4.94984 18.95C4.72984 19.03 4.45984 18.95 4.33984 18.73L2.33984 15.27C2.21984 15.05 2.26984 14.78 2.45984 14.63L4.11147 13.3384C4.03816 12.9032 4 12.4561 4 12C4 11.5439 4.03816 11.0968 4.11147 10.6616L2.45984 9.37C2.26984 9.22 2.20984 8.95 2.33984 8.73L4.33984 5.27C4.45984 5.05 4.71984 4.96 4.94984 5.05L6.90238 5.83415C7.58581 5.26848 8.36486 4.81426 9.21167 4.49934L9.50984 2.42C9.53984 2.18 9.74984 2 9.99984 2H13.9998C14.2498 2 14.4598 2.18 14.4898 2.42L14.788 4.49921C15.6349 4.81412 16.414 5.26836 17.0975 5.83406L19.0498 5.05C19.2698 4.97 19.5398 5.05 19.6598 5.27L21.6598 8.73C21.7798 8.95 21.7298 9.22 21.5398 9.37L19.8885 10.6613C19.9618 11.0966 20 11.5439 20 12C20 12.4561 19.9618 12.9034 19.8885 13.3387L21.5398 14.63C21.7298 14.78 21.7798 15.05 21.6598 15.27L19.6598 18.73C19.5398 18.95 19.2798 19.04 19.0498 18.95ZM12 17.5C15.0376 17.5 17.5 15.0376 17.5 12C17.5 8.96243 15.0376 6.5 12 6.5C8.96243 6.5 6.5 8.96243 6.5 12C6.5 15.0376 8.96243 17.5 12 17.5Z" 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-settings-default-alt2': Obi03SettingsDefaultAlt2;
+  }
+}

package/src/icons/icon-03-settings-default.ts

@@ -0,0 +1,42 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-03-settings-default')
+export class Obi03SettingsDefault 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="M20.3989 9C20.3989 9.238 20.3773 9.462 20.3485 9.686L21.8669 10.841C22.0037 10.946 22.0396 11.135 21.9533 11.289L20.514 13.711C20.4277 13.865 20.2405 13.928 20.075 13.865L18.2831 13.165C17.9089 13.438 17.5059 13.676 17.0669 13.851L16.7935 15.706C16.7719 15.874 16.6208 16 16.4409 16H13.5623C13.3824 16 13.2313 15.874 13.2097 15.706L12.9362 13.851C12.4973 13.676 12.0943 13.445 11.72 13.165L9.92815 13.865C9.76983 13.921 9.57552 13.865 9.48917 13.711L8.04989 11.289C7.96354 11.135 7.99952 10.946 8.13625 10.841L9.65468 9.686C9.6259 9.462 9.60431 9.231 9.60431 9C9.60431 8.769 9.6259 8.538 9.65468 8.314L8.13625 7.159C7.99952 7.054 7.95634 6.865 8.04989 6.711L9.48917 4.289C9.57552 4.135 9.76263 4.072 9.92815 4.135L11.72 4.835C12.0943 4.562 12.4973 4.324 12.9362 4.149L13.2097 2.294C13.2313 2.126 13.3824 2 13.5623 2H16.4409C16.6208 2 16.7719 2.126 16.7935 2.294L17.0669 4.149C17.5059 4.324 17.9089 4.555 18.2831 4.835L20.075 4.135C20.2334 4.079 20.4277 4.135 20.514 4.289L21.9533 6.711C22.0396 6.865 22.0037 7.054 21.8669 7.159L20.3485 8.314C20.3773 8.538 20.3989 8.762 20.3989 9ZM12.4829 9C12.4829 10.351 13.6127 11.45 15.0016 11.45C16.3905 11.45 17.5203 10.351 17.5203 9C17.5203 7.649 16.3905 6.55 15.0016 6.55C13.6127 6.55 12.4829 7.649 12.4829 9Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.9707 17.5C9.9707 17.653 9.95682 17.797 9.93832 17.941L10.9145 18.6835C11.0024 18.751 11.0255 18.8725 10.97 18.9715L10.0447 20.5285C9.98921 20.6275 9.86892 20.668 9.76252 20.6275L8.61059 20.1775C8.37002 20.353 8.11095 20.506 7.82875 20.6185L7.65296 21.811C7.63908 21.919 7.54193 22 7.42627 22H5.57577C5.46012 22 5.36297 21.919 5.34909 21.811L5.17329 20.6185C4.89109 20.506 4.63202 20.3575 4.39146 20.1775L3.23952 20.6275C3.13775 20.6635 3.01284 20.6275 2.95732 20.5285L2.03207 18.9715C1.97656 18.8725 1.99969 18.751 2.08759 18.6835L3.06373 17.941C3.04522 17.797 3.03134 17.6485 3.03134 17.5C3.03134 17.3515 3.04522 17.203 3.06373 17.059L2.08759 16.3165C1.99969 16.249 1.97193 16.1275 2.03207 16.0285L2.95732 14.4715C3.01284 14.3725 3.13312 14.332 3.23952 14.3725L4.39146 14.8225C4.63202 14.647 4.89109 14.494 5.17329 14.3815L5.34909 13.189C5.36297 13.081 5.46012 13 5.57577 13H7.42627C7.54193 13 7.63908 13.081 7.65296 13.189L7.82875 14.3815C8.11095 14.494 8.37002 14.6425 8.61059 14.8225L9.76252 14.3725C9.8643 14.3365 9.98921 14.3725 10.0447 14.4715L10.97 16.0285C11.0255 16.1275 11.0024 16.249 10.9145 16.3165L9.93832 17.059C9.95682 17.203 9.9707 17.347 9.9707 17.5ZM4.88183 17.5C4.88183 18.3685 5.60815 19.075 6.50102 19.075C7.39388 19.075 8.1202 18.3685 8.1202 17.5C8.1202 16.6315 7.39388 15.925 6.50102 15.925C5.60815 15.925 4.88183 16.6315 4.88183 17.5Z" 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="M20.3989 9C20.3989 9.238 20.3773 9.462 20.3485 9.686L21.8669 10.841C22.0037 10.946 22.0396 11.135 21.9533 11.289L20.514 13.711C20.4277 13.865 20.2405 13.928 20.075 13.865L18.2831 13.165C17.9089 13.438 17.5059 13.676 17.0669 13.851L16.7935 15.706C16.7719 15.874 16.6208 16 16.4409 16H13.5623C13.3824 16 13.2313 15.874 13.2097 15.706L12.9362 13.851C12.4973 13.676 12.0943 13.445 11.72 13.165L9.92815 13.865C9.76983 13.921 9.57552 13.865 9.48917 13.711L8.04989 11.289C7.96354 11.135 7.99952 10.946 8.13625 10.841L9.65468 9.686C9.6259 9.462 9.60431 9.231 9.60431 9C9.60431 8.769 9.6259 8.538 9.65468 8.314L8.13625 7.159C7.99952 7.054 7.95634 6.865 8.04989 6.711L9.48917 4.289C9.57552 4.135 9.76263 4.072 9.92815 4.135L11.72 4.835C12.0943 4.562 12.4973 4.324 12.9362 4.149L13.2097 2.294C13.2313 2.126 13.3824 2 13.5623 2H16.4409C16.6208 2 16.7719 2.126 16.7935 2.294L17.0669 4.149C17.5059 4.324 17.9089 4.555 18.2831 4.835L20.075 4.135C20.2334 4.079 20.4277 4.135 20.514 4.289L21.9533 6.711C22.0396 6.865 22.0037 7.054 21.8669 7.159L20.3485 8.314C20.3773 8.538 20.3989 8.762 20.3989 9ZM12.4829 9C12.4829 10.351 13.6127 11.45 15.0016 11.45C16.3905 11.45 17.5203 10.351 17.5203 9C17.5203 7.649 16.3905 6.55 15.0016 6.55C13.6127 6.55 12.4829 7.649 12.4829 9Z" style="fill: var(--element-active-color)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.9707 17.5C9.9707 17.653 9.95682 17.797 9.93832 17.941L10.9145 18.6835C11.0024 18.751 11.0255 18.8725 10.97 18.9715L10.0447 20.5285C9.98921 20.6275 9.86892 20.668 9.76252 20.6275L8.61059 20.1775C8.37002 20.353 8.11095 20.506 7.82875 20.6185L7.65296 21.811C7.63908 21.919 7.54193 22 7.42627 22H5.57577C5.46012 22 5.36297 21.919 5.34909 21.811L5.17329 20.6185C4.89109 20.506 4.63202 20.3575 4.39146 20.1775L3.23952 20.6275C3.13775 20.6635 3.01284 20.6275 2.95732 20.5285L2.03207 18.9715C1.97656 18.8725 1.99969 18.751 2.08759 18.6835L3.06373 17.941C3.04522 17.797 3.03134 17.6485 3.03134 17.5C3.03134 17.3515 3.04522 17.203 3.06373 17.059L2.08759 16.3165C1.99969 16.249 1.97193 16.1275 2.03207 16.0285L2.95732 14.4715C3.01284 14.3725 3.13312 14.332 3.23952 14.3725L4.39146 14.8225C4.63202 14.647 4.89109 14.494 5.17329 14.3815L5.34909 13.189C5.36297 13.081 5.46012 13 5.57577 13H7.42627C7.54193 13 7.63908 13.081 7.65296 13.189L7.82875 14.3815C8.11095 14.494 8.37002 14.6425 8.61059 14.8225L9.76252 14.3725C9.8643 14.3365 9.98921 14.3725 10.0447 14.4715L10.97 16.0285C11.0255 16.1275 11.0024 16.249 10.9145 16.3165L9.93832 17.059C9.95682 17.203 9.9707 17.347 9.9707 17.5ZM4.88183 17.5C4.88183 18.3685 5.60815 19.075 6.50102 19.075C7.39388 19.075 8.1202 18.3685 8.1202 17.5C8.1202 16.6315 7.39388 15.925 6.50102 15.925C5.60815 15.925 4.88183 16.6315 4.88183 17.5Z" 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-settings-default': Obi03SettingsDefault;
+  }
+}

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

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-03-settings')
+export class Obi03Settings 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="M19.43 12.98C19.47 12.66 19.5 12.34 19.5 12C19.5 11.66 19.47 11.34 19.43 11.02L21.54 9.37C21.73 9.22 21.78 8.95 21.66 8.73L19.66 5.27C19.54 5.05 19.27 4.97 19.05 5.05L16.56 6.05C16.04 5.65 15.48 5.32 14.87 5.07L14.49 2.42C14.46 2.18 14.25 2 14 2H9.99996C9.74996 2 9.53996 2.18 9.50996 2.42L9.12996 5.07C8.51996 5.32 7.95996 5.66 7.43996 6.05L4.94996 5.05C4.71996 4.96 4.45996 5.05 4.33996 5.27L2.33996 8.73C2.20996 8.95 2.26996 9.22 2.45996 9.37L4.56996 11.02C4.52996 11.34 4.49996 11.67 4.49996 12C4.49996 12.33 4.52996 12.66 4.56996 12.98L2.45996 14.63C2.26996 14.78 2.21996 15.05 2.33996 15.27L4.33996 18.73C4.45996 18.95 4.72996 19.03 4.94996 18.95L7.43996 17.95C7.95996 18.35 8.51996 18.68 9.12996 18.93L9.50996 21.58C9.53996 21.82 9.74996 22 9.99996 22H14C14.25 22 14.46 21.82 14.49 21.58L14.87 18.93C15.48 18.68 16.04 18.34 16.56 17.95L19.05 18.95C19.28 19.04 19.54 18.95 19.66 18.73L21.66 15.27C21.78 15.05 21.73 14.78 21.54 14.63L19.43 12.98ZM12 15.5C10.07 15.5 8.49995 13.93 8.49995 12C8.49995 10.07 10.07 8.5 12 8.5C13.93 8.5 15.5 10.07 15.5 12C15.5 13.93 13.93 15.5 12 15.5Z" 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="M19.43 12.98C19.47 12.66 19.5 12.34 19.5 12C19.5 11.66 19.47 11.34 19.43 11.02L21.54 9.37C21.73 9.22 21.78 8.95 21.66 8.73L19.66 5.27C19.54 5.05 19.27 4.97 19.05 5.05L16.56 6.05C16.04 5.65 15.48 5.32 14.87 5.07L14.49 2.42C14.46 2.18 14.25 2 14 2H9.99996C9.74996 2 9.53996 2.18 9.50996 2.42L9.12996 5.07C8.51996 5.32 7.95996 5.66 7.43996 6.05L4.94996 5.05C4.71996 4.96 4.45996 5.05 4.33996 5.27L2.33996 8.73C2.20996 8.95 2.26996 9.22 2.45996 9.37L4.56996 11.02C4.52996 11.34 4.49996 11.67 4.49996 12C4.49996 12.33 4.52996 12.66 4.56996 12.98L2.45996 14.63C2.26996 14.78 2.21996 15.05 2.33996 15.27L4.33996 18.73C4.45996 18.95 4.72996 19.03 4.94996 18.95L7.43996 17.95C7.95996 18.35 8.51996 18.68 9.12996 18.93L9.50996 21.58C9.53996 21.82 9.74996 22 9.99996 22H14C14.25 22 14.46 21.82 14.49 21.58L14.87 18.93C15.48 18.68 16.04 18.34 16.56 17.95L19.05 18.95C19.28 19.04 19.54 18.95 19.66 18.73L21.66 15.27C21.78 15.05 21.73 14.78 21.54 14.63L19.43 12.98ZM12 15.5C10.07 15.5 8.49995 13.93 8.49995 12C8.49995 10.07 10.07 8.5 12 8.5C13.93 8.5 15.5 10.07 15.5 12C15.5 13.93 13.93 15.5 12 15.5Z" 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-settings': Obi03Settings;
+  }
+}