@oicl/openbridge-webcomponents 0.0.13 → 0.0.15-dev-20240814145458

package/src/icons/icon-20-cell-full.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-cell-full')
 export class Obi20CellFull extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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.737 13.875C3.229 15.0917 3.95 16.2 4.9 17.2L6.1 16C5.3 15.2 4.7 14.279 4.3 13.237C3.9 12.1957 3.7 11.15 3.7 10.1C3.7 9.05 3.9 8.004 4.3 6.962C4.7 5.92067 5.3 5 6.1 4.2L4.9 3C3.95 4 3.229 5.10833 2.737 6.325C2.24567 7.54167 2 8.8 2 10.1C2 11.4 2.24567 12.6583 2.737 13.875Z" fill="currentColor"/>

package/src/icons/icon-20-cell-low.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-cell-low')
 export class Obi20CellLow extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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="M13 12.8291C14.165 12.4175 15 11.3062 15 10C15 8.34326 13.6572 7 12 7C10.3428 7 9 8.34326 9 10C9 11.3062 9.83496 12.4175 11 12.8291V22H13V12.8291Z" fill="currentColor"/>

package/src/icons/icon-20-cell-medium.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-cell-medium')
 export class Obi20CellMedium extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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.8118 12.2C6.1538 13.0167 6.6498 13.75 7.2998 14.4L8.4998 13.2C7.9998 12.7 7.6248 12.1417 7.3748 11.525C7.1248 10.9083 6.9998 10.3 6.9998 9.7C6.9998 9.05 7.1248 8.41667 7.3748 7.8C7.6248 7.18333 7.9998 6.65 8.4998 6.2L7.2998 5C6.6498 5.65 6.1538 6.38333 5.8118 7.2C5.47047 8.01667 5.2998 8.85 5.2998 9.7C5.2998 10.55 5.47047 11.3833 5.8118 12.2Z" fill="currentColor"/>

package/src/icons/icon-20-cell-off.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-cell-off')
 export class Obi20CellOff extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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="M4.47379 3.47412L2.83999 1.84033L1.42578 3.25455L3.30916 5.13792C3.09275 5.52144 2.90209 5.91713 2.73715 6.325C2.24582 7.54167 2.00015 8.8 2.00015 10.1C2.00015 11.4 2.24582 12.6583 2.73715 13.875C3.22915 15.0917 3.95015 16.2 4.90015 17.2L6.10015 16C5.30015 15.2 4.70015 14.279 4.30015 13.237C3.90015 12.1957 3.70015 11.15 3.70015 10.1C3.70015 9.05 3.90015 8.004 4.30015 6.962C4.37642 6.76345 4.45995 6.5693 4.55076 6.37952L5.80014 7.62891C5.46681 8.43633 5.30015 9.26003 5.30015 10.1C5.30015 10.95 5.47082 11.7833 5.81215 12.6C6.15415 13.4167 6.65015 14.15 7.30015 14.8L8.50015 13.6C8.00015 13.1 7.62515 12.5417 7.37515 11.925C7.12515 11.3083 7.00015 10.7 7.00015 10.1C7.00015 9.71442 7.04414 9.33471 7.1321 8.96087L9.1707 10.9995C9.47193 11.8521 10.1477 12.5279 11.0002 12.8291V22H13.0002V14.8289L20.7842 22.6129L22.1984 21.1987L13.5616 12.562C13.5615 12.5621 13.5618 12.5619 13.5616 12.562L9.43832 8.43798C9.43823 8.43812 9.43841 8.43784 9.43832 8.43798L8.05796 7.0583C8.05786 7.05843 8.05807 7.05818 8.05796 7.0583L6.86969 5.86935C6.86958 5.86947 6.86979 5.86923 6.86969 5.86935L5.66716 4.6675C5.66705 4.66762 5.66726 4.66737 5.66716 4.6675L4.47379 3.47412C4.47389 3.474 4.47368 3.47425 4.47379 3.47412Z" fill="currentColor"/>

package/src/icons/icon-20-satellite-full.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-satellite-full')
 export class Obi20SatelliteFull extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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="M15.4442 3.68508C16.5361 4.13737 17.5282 4.80031 18.364 5.63604C19.1997 6.47176 19.8626 7.46392 20.3149 8.55585C20.7672 9.64778 21 10.8181 21 12H23C23 10.5555 22.7155 9.12506 22.1627 7.79048C21.6099 6.4559 20.7996 5.24327 19.7782 4.22182C18.7567 3.20038 17.5441 2.39012 16.2095 1.83732C14.8749 1.28452 13.4445 1 12 1V3C13.1819 3 14.3522 3.23279 15.4442 3.68508Z" fill="currentColor"/>

package/src/icons/icon-20-satellite-low.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-satellite-low')
 export class Obi20SatelliteLow extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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 19C13.8565 19 15.637 18.2625 16.9497 16.9498L12.4141 12.4142L12.8409 11.9875C12.8927 11.9958 12.9458 12.0001 13 12.0001C13.5523 12.0001 14 11.5523 14 11.0001C14 10.4478 13.5523 10.0001 13 10.0001C12.4477 10.0001 12 10.4478 12 11.0001C12 11.1235 12.0224 11.2417 12.0633 11.3509L11.707 11.7071L7.05025 7.05029C5.7375 8.36305 5 10.1435 5 12C5 13.8566 5.7375 15.637 7.05025 16.9498C8.36301 18.2625 10.1435 19 12 19Z" fill="currentColor"/>

package/src/icons/icon-20-satellite-medium.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-satellite-medium')
 export class Obi20SatelliteMedium extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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="M15.5355 8.46398C15.0712 7.99968 14.52 7.63139 13.9134 7.38011C13.3068 7.12884 12.6566 6.99951 12 6.99951V4.99951C12.9193 4.99951 13.8295 5.18057 14.6788 5.53235C15.5281 5.88414 16.2997 6.39975 16.9497 7.04976C17.5998 7.69977 18.1154 8.47145 18.4672 9.32073C18.8189 10.17 19 11.0803 19 11.9995L17 11.9995C17 11.3429 16.8707 10.6927 16.6194 10.0861C16.3681 9.47947 15.9998 8.92827 15.5355 8.46398Z" fill="currentColor"/>

package/src/icons/icon-20-satellite-off.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-satellite-off')
 export class Obi20SatelliteOff extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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.4148 2L15.0006 3.41421L17.1217 5.53531L15 7.65701L16.4142 9.07122L18.5359 6.94952L20.6575 9.07107L22.0717 7.65685L19.9501 5.53531L22.0711 3.41436L20.6569 2.00015L18.5359 4.12109L16.4148 2Z" fill="currentColor"/>

package/src/icons/icon-20-sensor-gps-bad.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-sensor-gps-bad')
 export class Obi20SensorGpsBad extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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="M7.40381 1.03996C7.01328 0.649439 6.38012 0.649439 5.98959 1.03996L3.86827 3.16128C3.47775 3.55181 3.47775 4.18497 3.86827 4.5755L8.11091 8.81814C8.50119 9.20841 9.13379 9.20866 9.52438 8.81889L9.87868 8.46458L10.5858 9.17169L9.17157 10.5859C9.02306 10.7344 8.93103 10.918 8.89547 11.11C8.83753 11.4229 8.92956 11.7581 9.17157 12.0001L12 14.8285C12.242 15.0706 12.5772 15.1626 12.8901 15.1046C13.0821 15.0691 13.2657 14.9771 13.4142 14.8285L14.8284 13.4143L15.5355 14.1214L15.182 14.475C14.7915 14.8655 14.7915 15.4987 15.182 15.8892L19.4246 20.1318C19.8151 20.5224 20.4483 20.5224 20.8388 20.1318L22.9602 18.0105C23.3507 17.62 23.3507 16.9868 22.9602 16.5963L18.7175 12.3537C18.327 11.9631 17.6938 11.9631 17.3033 12.3537L16.9497 12.7072L16.2426 12.0001L19.0711 9.17169C19.4616 8.78117 19.4616 8.148 19.0711 7.75748L16.2426 4.92905C15.8521 4.53853 15.219 4.53853 14.8284 4.92905L12 7.75748L11.2929 7.05037L11.6472 6.69607C12.037 6.30549 12.0367 5.67288 11.6464 5.2826L7.40381 1.03996ZM15.5355 7.05037L16.9497 8.46458L12.7071 12.7072L11.2929 11.293L15.5355 7.05037Z" fill="currentColor"/>

package/src/icons/icon-20-sensor-gps-full.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-sensor-gps-full')
 export class Obi20SensorGpsFull extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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.8685 4.57501C3.47798 4.18448 3.47798 3.55132 3.8685 3.1608L5.98982 1.03948C6.38034 0.648951 7.01351 0.648951 7.40403 1.03948L11.6467 5.28212C12.0372 5.67264 12.0372 6.30581 11.6467 6.69633L11.2931 7.04988L12.0002 7.75699L14.8287 4.92856C15.2192 4.53804 15.8523 4.53804 16.2429 4.92856L19.0713 7.75699C19.4618 8.14751 19.4618 8.78068 19.0713 9.1712L16.2429 11.9996L16.95 12.7067L17.3035 12.3532C17.6941 11.9627 18.3272 11.9627 18.7177 12.3532L22.9604 16.5958C23.3509 16.9863 23.3509 17.6195 22.9604 18.01L20.8391 20.1314C20.4485 20.5219 19.8154 20.5219 19.4248 20.1314L15.1822 15.8887C14.7917 15.4982 14.7917 14.865 15.1822 14.4745L15.5358 14.1209L14.8287 13.4138L13.4144 14.8281C13.0239 15.2186 12.3908 15.2186 12.0002 14.8281L9.1718 11.9996C8.78128 11.6091 8.78128 10.9759 9.1718 10.5854L10.586 9.1712L9.87891 8.4641L9.52535 8.81765C9.13483 9.20817 8.50166 9.20817 8.11114 8.81765L3.8685 4.57501Z" fill="currentColor"/>

package/src/icons/icon-20-sensor-gps-low.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-sensor-gps-low')
 export class Obi20SensorGpsLow extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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.86809 4.5755C3.47756 4.18497 3.47756 3.55181 3.86809 3.16128L5.98941 1.03996C6.37993 0.649439 7.0131 0.649439 7.40362 1.03996L11.6463 5.2826C12.0368 5.67313 12.0368 6.30629 11.6463 6.69682L11.2927 7.05037L11.9998 7.75748L14.8282 4.92905C15.2188 4.53853 15.8519 4.53853 16.2425 4.92905L19.0709 7.75748C19.4614 8.148 19.4614 8.78117 19.0709 9.17169L16.2425 12.0001L16.9496 12.7072L17.3031 12.3537C17.6936 11.9631 18.3268 11.9631 18.7173 12.3537L22.96 16.5963C23.3505 16.9868 23.3505 17.62 22.96 18.0105L20.8387 20.1318C20.4481 20.5224 19.815 20.5224 19.4244 20.1318L15.1818 15.8892C14.7913 15.4987 14.7913 14.8655 15.1818 14.475L15.5353 14.1214L14.8282 13.4143L13.414 14.8285C13.0235 15.2191 12.3903 15.2191 11.9998 14.8285L9.17139 12.0001C8.78086 11.6096 8.78086 10.9764 9.17139 10.5859L10.5856 9.17169L9.8785 8.46458L9.52494 8.81814C9.13442 9.20866 8.50125 9.20866 8.11073 8.81814L3.86809 4.5755Z" fill="currentColor"/>

package/src/icons/icon-20-sensor-gps-medium.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-sensor-gps-medium')
 export class Obi20SensorGpsMedium extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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.86809 4.57501C3.47756 4.18448 3.47756 3.55132 3.86809 3.1608L5.98941 1.03948C6.37993 0.648951 7.0131 0.648951 7.40362 1.03948L11.6463 5.28212C12.0368 5.67264 12.0368 6.30581 11.6463 6.69633L11.2927 7.04988L11.9998 7.75699L14.8282 4.92856C15.2188 4.53804 15.8519 4.53804 16.2425 4.92856L19.0709 7.75699C19.4614 8.14751 19.4614 8.78068 19.0709 9.1712L16.2425 11.9996L16.9496 12.7067L17.3031 12.3532C17.6936 11.9627 18.3268 11.9627 18.7173 12.3532L22.96 16.5958C23.3505 16.9863 23.3505 17.6195 22.96 18.01L20.8386 20.1314C20.4481 20.5219 19.815 20.5219 19.4244 20.1314L15.1818 15.8887C14.7913 15.4982 14.7913 14.865 15.1818 14.4745L15.5354 14.1209L14.8282 13.4138L13.414 14.8281C13.0235 15.2186 12.3903 15.2186 11.9998 14.8281L9.17139 11.9996C8.78087 11.6091 8.78087 10.9759 9.17139 10.5854L10.5856 9.1712L9.8785 8.4641L9.52494 8.81765C9.13442 9.20817 8.50125 9.20817 8.11073 8.81765L3.86809 4.57501Z" fill="currentColor"/>

package/src/icons/icon-20-sensor-gyro.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-sensor-gyro')
 export class Obi20SensorGyro extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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="M7.46873 11.353C7.37401 11.6038 7.28514 11.8535 7.20311 12.1016C5.75584 10.6526 5.08104 9.22023 5.59373 8.33302C6.07616 7.49635 7.50682 7.33155 9.32713 7.75831C9.25389 7.86695 9.18162 7.97731 9.11033 8.08937C8.99119 8.27491 8.87498 8.46485 8.76073 8.65919C8.62889 8.63356 8.49998 8.61158 8.37498 8.59352C8.10838 8.55519 7.86717 8.53566 7.65233 8.53175C7.35155 8.52638 7.10252 8.55152 6.90526 8.5984C6.5703 8.67823 6.48241 8.79371 6.45994 8.83302C6.43651 8.87208 6.38084 9.00636 6.47948 9.33619C6.57811 9.66871 6.81053 10.1038 7.20994 10.6118C7.3242 10.7573 7.45018 10.9053 7.58592 11.0552L7.46873 11.353Z" fill="currentColor"/>

package/src/icons/icon-20-sensor-wind.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-sensor-wind')
 export class Obi20SensorWind extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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="M4 2H2V22H4V11.4286L6 12L10 12.3333V3.5L6 2.5L4 2.78571V2ZM4 3.78571V10.381L6 10.8889V3.5L4 3.78571ZM12 11.8889V3.83333L16 4.83333V11.2222L12 11.8889ZM22 8.61111L18 10.7778V4.66667L22 4.16667V8.61111Z" fill="currentColor"/>

package/src/icons/icon-20-usb.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-usb')
 export class Obi20USB extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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="M18.1868 4.85592L17.4796 4.14882L16.7725 4.85592L17.4796 5.56303L18.1868 4.85592Z" fill="currentColor"/>

package/src/icons/icon-20-wifi-bad.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-wifi-bad')
 export class Obi20WifiBad extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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="M24 8.48C20.93 5.4 16.69 3.5 12 3.5C7.31 3.5 3.07 5.4 0 8.48L12 20.5V11.5H20.99L24 8.48ZM19.59 13.5L17.5 15.59L15.41 13.5L14 14.91L16.09 17L14 19.09L15.41 20.5L17.5 18.42L19.59 20.5L21 19.09L18.92 17L21 14.91L19.59 13.5Z" fill="currentColor"/>

package/src/icons/icon-20-wifi-off.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-wifi-off')
 export class Obi20WifiOff extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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="M23.6404 7.59479C23.1903 7.25479 18.7104 3.59479 12.0004 3.59479C10.6804 3.59479 9.45035 3.73479 8.31035 3.97479L18.4304 14.0948L23.6404 7.59479ZM3.41035 1.90479L2.00035 3.31479L4.05035 5.36479C1.91035 6.35478 0.590352 7.41479 0.360352 7.59479L12.0004 22.0948L15.9104 17.2248L19.2304 20.5448L20.6404 19.1348L3.41035 1.90479Z" fill="currentColor"/>

package/src/icons/icon-20-wifi-wifi_statusbar_0.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-wifi-wifi_statusbar_0')
 export class Obi20WifiWifi_statusbar_0 extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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.5C7.31 3.5 3.07 5.4 0 8.48L12 20.5L24 8.48C20.93 5.4 16.69 3.5 12 3.5ZM2.92 8.57C5.51 6.58 8.67 5.5 12 5.5C15.33 5.5 18.49 6.58 21.08 8.57L12 17.67L2.92 8.57Z" fill="currentColor"/>

package/src/icons/icon-20-wifi-wifi_statusbar_1.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-wifi-wifi_statusbar_1')
 export class Obi20WifiWifi_statusbar_1 extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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="M0 8.48C3.07 5.4 7.31 3.5 12 3.5C16.69 3.5 20.93 5.4 24 8.48L12 20.5L0 8.48ZM12 5.5C8.67 5.5 5.51 6.58 2.92 8.57L8.39335 14.0554C9.418 13.3893 10.66 13 12 13C13.34 13 14.582 13.3893 15.6067 14.0554L21.08 8.57C18.49 6.58 15.33 5.5 12 5.5Z" fill="currentColor"/>

package/src/icons/icon-20-wifi-wifi_statusbar_2.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-wifi-wifi_statusbar_2')
 export class Obi20WifiWifi_statusbar_2 extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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="M0 8.48C3.07 5.4 7.31 3.5 12 3.5C16.69 3.5 20.93 5.4 24 8.48L12 20.5L0 8.48ZM12 5.5C8.67 5.5 5.51 6.58 2.92 8.57L5.98706 11.6438C7.65322 10.6119 9.73679 10 12 10C14.2632 10 16.3468 10.6119 18.0129 11.6438L21.08 8.57C18.49 6.58 15.33 5.5 12 5.5Z" fill="currentColor"/>

package/src/icons/icon-20-wifi-wifi_statusbar_3.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-wifi-wifi_statusbar_3')
 export class Obi20WifiWifi_statusbar_3 extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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="M0 8.48C3.07 5.4 7.31 3.5 12 3.5C16.69 3.5 20.93 5.4 24 8.48L12 20.5L0 8.48ZM12 5.5C8.67 5.5 5.51 6.58 2.92 8.57L4.29443 9.94746C6.4324 8.4106 9.10163 7.5 12 7.5C14.8984 7.5 17.5676 8.4106 19.7056 9.94746L21.08 8.57C18.49 6.58 15.33 5.5 12 5.5Z" fill="currentColor"/>

package/src/icons/icon-20-wifi-wifi_statusbar_4.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-wifi-wifi_statusbar_4')
 export class Obi20WifiWifi_statusbar_4 extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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.5C7.31 3.5 3.07 5.4 0 8.48L12 20.5L24 8.48C20.93 5.4 16.69 3.5 12 3.5Z" fill="currentColor"/>

package/src/icons/icon-20-wifi2-off.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-wifi2-off')
 export class Obi20Wifi2Off extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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="M2 4.22006L3.41 2.81006L20.38 19.7801L18.97 21.1901L11.89 14.1101C10.11 14.1301 8.35 14.8201 7 16.1701L5 14.1701C6.27 12.9101 7.79 12.0601 9.41 11.6301L7.17 9.39006C5.65 10.0101 4.23 10.9401 3 12.1701L1 10.1701C2.22 8.96006 3.59 8.00006 5.05 7.27006L2 4.22006ZM23 10.1701L21 12.1701C18.49 9.66006 15.18 8.42006 11.88 8.44006L9.3 5.86006C14.13 5.02006 19.27 6.44006 23 10.1701ZM15.28 11.8401C16.64 12.3201 17.92 13.0901 19 14.1701L18.3 14.8601L15.28 11.8401ZM9 18.1701L12 21.1701L15 18.1701C13.35 16.5101 10.66 16.5101 9 18.1701Z" fill="currentColor"/>

package/src/icons/icon-20-wifi2.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-20-wifi2')
 export class Obi20Wifi2 extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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="M1 8.77613L3 10.7761C7.97 5.80613 16.03 5.80613 21 10.7761L23 8.77613C16.93 2.70613 7.08 2.70613 1 8.77613ZM9 16.7761L12 19.7761L15 16.7761C13.35 15.1161 10.66 15.1161 9 16.7761ZM7 14.7761L5 12.7761C8.87 8.91613 15.14 8.91613 19 12.7761L17 14.7761C14.24 12.0161 9.76 12.0161 7 14.7761Z" fill="currentColor"/>

package/src/icons/icon-frame2622.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-frame2622')
 export class ObiFrame2622 extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) useCssColor = false;
 
   private icon = svg``;
 

package/src/icons/icon-iec-02-ais-target-activated-selected.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-iec-02-ais-target-activated-selected')
 export class ObiIEC02AisTargetActivatedSelected extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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="M6.40948 20L12 4.02709L17.5905 20H6.40948Z" stroke="black" stroke-width="2"/>

package/src/icons/icon-iec-02-ais-target-activated.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-iec-02-ais-target-activated')
 export class ObiIEC02AisTargetActivated extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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 1L5 21H19L12 1ZM12 7.05418L7.81896 19H16.181L12 7.05418Z" fill="currentColor"/>

package/src/icons/icon-iec-02-associated-target-ais.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-iec-02-associated-target-ais')
 export class ObiIEC02AssociatedTargetAis extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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="M24 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 12ZM18.3262 21C16.5368 22.2601 14.3548 23 12 23C9.64518 23 7.46319 22.2601 5.67384 21H18.3262ZM18.8598 20.5995L12 1C18.0751 1 23 5.92487 23 12C23 15.4808 21.3833 18.5839 18.8598 20.5995ZM5.14017 20.5995C2.6167 18.5839 1 15.4808 1 12C1 5.92487 5.92487 1 12 1L5.14017 20.5995ZM7.81896 19L12 7.05418L16.181 19H7.81896Z" fill="currentColor"/>

package/src/icons/icon-iec-02-associated-target-radar.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-iec-02-associated-target-radar')
 export class ObiIEC02AssociatedTargetRadar extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12ZM13.5138 15.7036C13.0468 15.8947 12.5357 16 12 16C11.4643 16 10.9532 15.8947 10.4862 15.7036L12 11.1623L13.5138 15.7036ZM14.4001 15.2002L12 8C14.2091 8 16 9.79086 16 12C16 13.3086 15.3716 14.4705 14.4001 15.2002ZM9.59992 15.2002C8.62841 14.4705 8 13.3086 8 12C8 9.79086 9.79086 8 12 8L9.59992 15.2002Z" fill="currentColor"/>

package/src/icons/icon-iec-02-radar-target-tracked-selected.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-iec-02-radar-target-tracked-selected')
 export class ObiIEC02RadarTargetTrackedSelected extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" fill="currentColor"/>

package/src/icons/icon-iec-02-radar-target-tracked.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-iec-02-radar-target-tracked')
 export class ObiIEC02RadarTargetTracked extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) 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 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" fill="currentColor"/>

package/src/icons/icon-temp.ts

@@ -3,7 +3,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-temp')
 export class ObiTemp extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) useCssColor = false;
 
   private icon = svg``;
 

package/src/icons.stories.ts

@@ -44,7 +44,7 @@ export const List: Story = {
           (name) =>
             html`<div class="item"><${unsafeStatic(
               `obi-${name}`
-            )} ?use-css-color=${args.useCssColor} class="icon"></${unsafeStatic(
+            )} ?usecsscolor=${args.useCssColor} class="icon"></${unsafeStatic(
               `obi-${name}`
             )}> &lt;obi-${name}&gt;</div>`
         )}
@@ -71,7 +71,7 @@ export const UseFontColor: Story = {
   },
   render: (args) =>
     html`<div style="height: ${args.size}px; color: ${args.color}">
-         <${unsafeStatic(`obi-${args.name}`)} ?use-css-color=${
+         <${unsafeStatic(`obi-${args.name}`)} ?usecsscolor=${
            args.useCssColor
          } class="icon"></${unsafeStatic(`obi-${args.name}`)}> 
          </div>`,

package/src/navigation-instruments/azimuth-thruster/azimuth-thruster.stories.ts

@@ -2,37 +2,37 @@ import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcAzimuthThruster} from './azimuth-thruster';
 import './azimuth-thruster';
 import {InstrumentState, Size} from '../types';
-import {html} from 'lit';
+import {beta6Decorator, widthDecorator} from '../../storybook-util';
+import {AdviceType} from '../watch/advice';
+import {PropellerType} from '../thruster/propeller';
 
 const meta: Meta<typeof ObcAzimuthThruster> = {
   title: 'Navigation instruments/Azimuth thruster',
   tags: ['autodocs'],
   component: 'obc-azimuth-thruster',
   argTypes: {
-    width: {control: {type: 'range', min: 32, max: 1028, step: 1}},
     thrust: {control: {type: 'range', min: -100, max: 100, step: 1}},
     thrustSetpoint: {control: {type: 'range', min: -100, max: 100, step: 1}},
     angle: {control: {type: 'range', min: -180, max: 180, step: 1}},
     angleSetpoint: {control: {type: 'range', min: -180, max: 180, step: 1}},
+    state: {
+      options: Object.values(InstrumentState),
+    },
+    topPropeller: {
+      options: Object.values(PropellerType),
+    },
+    bottomPropeller: {
+      options: Object.values(PropellerType),
+    },
+    width: {control: {type: 'range', min: 32, max: 1028, step: 1}},
   },
   args: {
     width: 512,
+    autoAtThrustSetpointDeadband: 1,
+    autoAtAngleSetpointDeadband: 2,
+    thrustSetpointAtZeroDeadband: 0.1,
   },
-  render: (args) => html`
-    <div style="width: ${args.width}px; height: ${args.width}px">
-      <obc-azimuth-thruster
-        .size=${args.size}
-        .thrust=${args.thrust}
-        .thrustSetpoint=${args.thrustSetpoint}
-        .angle=${args.angle}
-        .angleSetpoint=${args.angleSetpoint}
-        .state=${args.state}
-        .atThrustSetpoint=${args.atThrustSetpoint}
-        .atAngleSetpoint=${args.atAngleSetpoint}
-        .loading=${args.loading}
-      ></obc-azimuth-thruster>
-    </div>
-  `,
+  decorators: [widthDecorator, beta6Decorator],
 } satisfies Meta<ObcAzimuthThruster>;
 
 export default meta;
@@ -46,6 +46,15 @@ export const InCommand: Story = {
     angle: 30,
     angleSetpoint: 40,
     state: InstrumentState.inCommand,
+    angleAdvices: [
+      {minAngle: 20, maxAngle: 50, type: AdviceType.advice, hinted: true},
+      {minAngle: 60, maxAngle: 100, type: AdviceType.caution, hinted: true},
+    ],
+    thrustAdvices: [
+      {min: 20, max: 50, type: AdviceType.advice, hinted: true},
+      {min: 75, max: 100, type: AdviceType.caution, hinted: true},
+      {min: -100, max: -75, type: AdviceType.caution, hinted: true},
+    ],
   },
 };
 
@@ -54,11 +63,62 @@ export const InCommandAtSetpoint: Story = {
     size: Size.large,
     thrust: 60,
     thrustSetpoint: 60,
-    atThrustSetpoint: true,
     angle: 30,
     angleSetpoint: 30,
+    state: InstrumentState.inCommand,
+  },
+};
+
+export const Pod: Story = {
+  args: {
+    size: Size.large,
+    thrust: 60,
+    thrustSetpoint: 60,
+    angle: 30,
+    angleSetpoint: 30,
+    state: InstrumentState.inCommand,
+    topPropeller: PropellerType.single,
+    bottomPropeller: PropellerType.cap,
+  },
+};
+
+export const InCommandAtSetpointDisableAutoSetpoint: Story = {
+  args: {
+    size: Size.large,
+    thrust: 60,
+    thrustSetpoint: 65,
+    atThrustSetpoint: true,
+    disableAutoAtThrustSetpoint: true,
+    angle: 30,
+    angleSetpoint: 35,
     atAngleSetpoint: true,
+    disableAutoAtAngleSetpoint: true,
+    state: InstrumentState.inCommand,
+  },
+};
+
+export const SingleDirection: Story = {
+  args: {
+    size: Size.large,
+    thrust: 60,
+    thrustSetpoint: 60,
+    angle: 30,
+    angleSetpoint: 30,
+    state: InstrumentState.inCommand,
+    singleDirection: true,
+  },
+};
+
+export const SingleDirectionWithPropeller: Story = {
+  args: {
+    size: Size.large,
+    thrust: 60,
+    thrustSetpoint: 60,
+    angle: 30,
+    angleSetpoint: 30,
     state: InstrumentState.inCommand,
+    singleDirection: true,
+    bottomPropeller: PropellerType.single,
   },
 };
 
@@ -78,10 +138,19 @@ export const ActiveAtSetpoint: Story = {
     size: Size.large,
     thrust: 60,
     thrustSetpoint: 60,
-    atThrustSetpoint: true,
     angle: 30,
     angleSetpoint: 30,
-    atAngleSetpoint: true,
+    state: InstrumentState.active,
+  },
+};
+
+export const ActiveNoSetpoint: Story = {
+  args: {
+    size: Size.large,
+    thrust: 60,
+    thrustSetpoint: undefined,
+    angle: 30,
+    angleSetpoint: undefined,
     state: InstrumentState.active,
   },
 };