@oicl/openbridge-webcomponents 0.0.15-dev-20250205200936 → 0.0.15-dev-20250206192612

package/dist/components/alert-button/alert-button.css.js

@@ -1,475 +1,504 @@
 import { css } from "lit";
 const compentStyle = css`* {
-    box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+button {
+  position: relative;
+  padding: 0;
+  appearance: none;
+  border: none;
+  background-color: transparent;
+}
+
+.wrapper.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 
 .wrapper {
-    box-sizing: border-box;
-    padding: 0;
-    padding-right: 8px;
-    background: transparent;
-    height: 48px;
-    width: 56px;
-    appearance: none;
-    border: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  box-sizing: border-box;
+  background: transparent;
+  min-width: var(--global-size-spacing-touch-target-min);
+  min-height: var(--global-size-spacing-touch-target-min);
+  padding: 0 var(--app-components-alert-button-margin-horizontal);
+  appearance: none;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-    font-family: 'Noto Sans';
+  font-family: 'Noto Sans';
 
-    font-size: 1rem;
+  font-size: 1rem;
 
-    font-style: normal;
+  font-style: normal;
 
-    font-weight: 570;
+  font-weight: 570;
 
-    line-height: 1.5rem;
+  line-height: 1.5rem;
 
-    /* 150% */
+  /* 150% */
 }
 
 .wrapper.standalone {
-        width: 48px;
-        padding-right: 0;
-    }
-
-.wrapper.counter {
-        width: 64px;
-    }
+    padding-right: 0;
+  }
 
-.wrapper.counter.standalone {
-            width: 72px;
-            padding-left: 8px;
-            padding-right: 8px;
-        }
+.wrapper:not(.standalone) {
+    padding-left: 0;
+  }
 
 .wrapper .icon {
-        height: 24px;
-        width: 24px;
-    }
+    width: var(--app-components-alert-button-icon-size);
+    height: var(--app-components-alert-button-icon-size);
+  }
 
 .wrapper .visible-wrapper {
-        border-radius: 6px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 32px;
-        width: 100%;
-        gap: 4px;
-    }
+    border-radius: var(--ui-components-button-border-radius-top-left)
+      var(--ui-components-button-border-radius-top-right)
+      var(--ui-components-button-border-radius-bottom-right)
+      var(--ui-components-button-border-radius-bottom-left);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--app-components-alert-button-alert-button-width);
+    height: var(--app-components-alert-button-visual-target-size);
+    gap: var(--app-components-alert-button-counter-spacing);
+  }
 
-.wrapper.standalone:not(.counter) .visible-wrapper {
-        width: 32px;
+.wrapper:not(.counter),.wrapper.type-flat {
+    padding: 0;
+  }
+
+:is(.wrapper:not(.counter),.wrapper.type-flat) .visible-wrapper {
+      width: var(--ui-components-icon-button-visual-target-size);
     }
 
 .wrapper:not(.standalone) .visible-wrapper {
-            border-radius: 0 6px 6px 0;
-        }
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
 
 .wrapper.type-alarm {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .wrapper.type-alarm:focus {
-    outline: none;
+  outline: none;
 }
 
 .wrapper.type-alarm.activated .visible-wrapper {
-    border-color: var(--alarm-activated-border-color);
-    background-color: var(--alarm-activated-background-color);
+  border-color: var(--alarm-activated-border-color);
+  background-color: var(--alarm-activated-background-color);
 }
 
 .wrapper.type-alarm .visible-wrapper {
-    border-color: var(--alarm-enabled-border-color);
-    background-color: var(--alarm-enabled-background-color);
-    border-width: 1px;
-    border-style: solid;
-    cursor: pointer;
+  border-color: var(--alarm-enabled-border-color);
+  background-color: var(--alarm-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
 }
 
 .wrapper.type-alarm:focus-visible .visible-wrapper {
-    outline-color: var(--border-focus-color);
-    outline-width: var(--global-size-spacing-border-weight-focusframe);
-    outline-style: solid;
+  outline-color: var(--border-focus-color);
+  outline-width: var(--global-size-spacing-border-weight-focusframe);
+  outline-style: solid;
 }
 
 .wrapper.type-alarm:hover .visible-wrapper {
-    border-color: var(--alarm-hover-border-color);
-    background-color: var(--alarm-hover-background-color);
+  border-color: var(--alarm-hover-border-color);
+  background-color: var(--alarm-hover-background-color);
 }
 
 .wrapper.type-alarm:active .visible-wrapper {
-    border-color: var(--alarm-pressed-border-color);
-    background-color: var(--alarm-pressed-background-color);
+  border-color: var(--alarm-pressed-border-color);
+  background-color: var(--alarm-pressed-background-color);
 }
 
 .wrapper.type-alarm:disabled .visible-wrapper {
-    border-color: var(--alarm-disabled-border-color);
-    background-color: var(--alarm-disabled-background-color);
-    cursor: not-allowed;
-    color: var(--on-alarm-disabled-color);
+  border-color: var(--alarm-disabled-border-color);
+  background-color: var(--alarm-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-alarm-disabled-color);
 }
 
 .wrapper.type-alarm {
-        color: var(--on-alarm-active-color);
+    color: var(--on-alarm-active-color);
 }
 
+.wrapper.type-alarm.on {
+      opacity: var(--alarm-blink-on);
+    }
+
+.wrapper.type-alarm-off {
+    opacity: var(--alarm-blink-off);
+  }
+
 .wrapper.type-warning {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .wrapper.type-warning:focus {
-    outline: none;
+  outline: none;
 }
 
 .wrapper.type-warning.activated .visible-wrapper {
-    border-color: var(--warning-activated-border-color);
-    background-color: var(--warning-activated-background-color);
+  border-color: var(--warning-activated-border-color);
+  background-color: var(--warning-activated-background-color);
 }
 
 .wrapper.type-warning .visible-wrapper {
-    border-color: var(--warning-enabled-border-color);
-    background-color: var(--warning-enabled-background-color);
-    border-width: 1px;
-    border-style: solid;
-    cursor: pointer;
+  border-color: var(--warning-enabled-border-color);
+  background-color: var(--warning-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
 }
 
 .wrapper.type-warning:focus-visible .visible-wrapper {
-    outline-color: var(--border-focus-color);
-    outline-width: var(--global-size-spacing-border-weight-focusframe);
-    outline-style: solid;
+  outline-color: var(--border-focus-color);
+  outline-width: var(--global-size-spacing-border-weight-focusframe);
+  outline-style: solid;
 }
 
 .wrapper.type-warning:hover .visible-wrapper {
-    border-color: var(--warning-hover-border-color);
-    background-color: var(--warning-hover-background-color);
+  border-color: var(--warning-hover-border-color);
+  background-color: var(--warning-hover-background-color);
 }
 
 .wrapper.type-warning:active .visible-wrapper {
-    border-color: var(--warning-pressed-border-color);
-    background-color: var(--warning-pressed-background-color);
+  border-color: var(--warning-pressed-border-color);
+  background-color: var(--warning-pressed-background-color);
 }
 
 .wrapper.type-warning:disabled .visible-wrapper {
-    border-color: var(--warning-disabled-border-color);
-    background-color: var(--warning-disabled-background-color);
-    cursor: not-allowed;
-    color: var(--on-warning-disabled-color);
+  border-color: var(--warning-disabled-border-color);
+  background-color: var(--warning-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-warning-disabled-color);
 }
 
 .wrapper.type-warning .visible-wrapper {
-            color: var(--on-warning-active-color, #FFF);
-        }
+      color: var(--on-warning-active-color, #fff);
+    }
 
 :is(.wrapper.type-warning .visible-wrapper) .badge {
-                color: var(--on-warning-active-color, #FFF);
-            }
+        color: var(--on-warning-active-color, #fff);
+      }
+
+.wrapper.type-warning.on {
+      opacity: var(--warning-blink-on);
+    }
+
+.wrapper.type-warning-off {
+    opacity: var(--warning-blink-off);
+  }
 
 .wrapper.type-caution {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .wrapper.type-caution:focus {
-    outline: none;
+  outline: none;
 }
 
 .wrapper.type-caution.activated .visible-wrapper {
-    border-color: var(--caution-activated-border-color);
-    background-color: var(--caution-activated-background-color);
+  border-color: var(--caution-activated-border-color);
+  background-color: var(--caution-activated-background-color);
 }
 
 .wrapper.type-caution .visible-wrapper {
-    border-color: var(--caution-enabled-border-color);
-    background-color: var(--caution-enabled-background-color);
-    border-width: 1px;
-    border-style: solid;
-    cursor: pointer;
+  border-color: var(--caution-enabled-border-color);
+  background-color: var(--caution-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
 }
 
 .wrapper.type-caution:focus-visible .visible-wrapper {
-    outline-color: var(--border-focus-color);
-    outline-width: var(--global-size-spacing-border-weight-focusframe);
-    outline-style: solid;
+  outline-color: var(--border-focus-color);
+  outline-width: var(--global-size-spacing-border-weight-focusframe);
+  outline-style: solid;
 }
 
 .wrapper.type-caution:hover .visible-wrapper {
-    border-color: var(--caution-hover-border-color);
-    background-color: var(--caution-hover-background-color);
+  border-color: var(--caution-hover-border-color);
+  background-color: var(--caution-hover-background-color);
 }
 
 .wrapper.type-caution:active .visible-wrapper {
-    border-color: var(--caution-pressed-border-color);
-    background-color: var(--caution-pressed-background-color);
+  border-color: var(--caution-pressed-border-color);
+  background-color: var(--caution-pressed-background-color);
 }
 
 .wrapper.type-caution:disabled .visible-wrapper {
-    border-color: var(--caution-disabled-border-color);
-    background-color: var(--caution-disabled-background-color);
-    cursor: not-allowed;
-    color: var(--on-caution-disabled-color);
+  border-color: var(--caution-disabled-border-color);
+  background-color: var(--caution-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-caution-disabled-color);
 }
 
 .wrapper.type-caution .visible-wrapper {
-            color: var(--on-caution-active-color, #FFF);
-        }
+      color: var(--on-caution-active-color, #fff);
+    }
 
 :is(.wrapper.type-caution .visible-wrapper) .badge {
-                color: var(--on-caution-active-color, #FFF);
-            }
+        color: var(--on-caution-active-color, #fff);
+      }
 
 .wrapper.type-running {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .wrapper.type-running:focus {
-    outline: none;
+  outline: none;
 }
 
 .wrapper.type-running.activated .visible-wrapper {
-    border-color: var(--normal-activated-border-color);
-    background-color: var(--normal-activated-background-color);
+  border-color: var(--running-activated-border-color);
+  background-color: var(--running-activated-background-color);
 }
 
 .wrapper.type-running .visible-wrapper {
-    border-color: var(--normal-enabled-border-color);
-    background-color: var(--normal-enabled-background-color);
-    border-width: 1px;
-    border-style: solid;
-    cursor: pointer;
+  border-color: var(--running-enabled-border-color);
+  background-color: var(--running-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
 }
 
 .wrapper.type-running:focus-visible .visible-wrapper {
-    outline-color: var(--border-focus-color);
-    outline-width: var(--global-size-spacing-border-weight-focusframe);
-    outline-style: solid;
+  outline-color: var(--border-focus-color);
+  outline-width: var(--global-size-spacing-border-weight-focusframe);
+  outline-style: solid;
 }
 
 .wrapper.type-running:hover .visible-wrapper {
-    border-color: var(--normal-hover-border-color);
-    background-color: var(--normal-hover-background-color);
+  border-color: var(--running-hover-border-color);
+  background-color: var(--running-hover-background-color);
 }
 
 .wrapper.type-running:active .visible-wrapper {
-    border-color: var(--normal-pressed-border-color);
-    background-color: var(--normal-pressed-background-color);
+  border-color: var(--running-pressed-border-color);
+  background-color: var(--running-pressed-background-color);
 }
 
 .wrapper.type-running:disabled .visible-wrapper {
-    border-color: var(--normal-disabled-border-color);
-    background-color: var(--normal-disabled-background-color);
-    cursor: not-allowed;
-    color: var(--on-normal-disabled-color);
+  border-color: var(--running-disabled-border-color);
+  background-color: var(--running-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-running-disabled-color);
 }
 
-.wrapper.type-running .icon {
-            color: var(--alert-running-color);
-        }
-
-.wrapper.type-command {
-    cursor: pointer;
+.wrapper.type-running {
+    color: var(--on-running-active-color);
 }
 
-.wrapper.type-command:focus {
-    outline: none;
+.wrapper.type-notification {
+  cursor: pointer;
 }
 
-.wrapper.type-command.activated .visible-wrapper {
-    border-color: var(--notification-activated-border-color);
-    background-color: var(--notification-activated-background-color);
+.wrapper.type-notification:focus {
+  outline: none;
 }
 
-.wrapper.type-command .visible-wrapper {
-    border-color: var(--notification-enabled-border-color);
-    background-color: var(--notification-enabled-background-color);
-    border-width: 1px;
-    border-style: solid;
-    cursor: pointer;
+.wrapper.type-notification.activated .visible-wrapper {
+  border-color: var(--notification-activated-border-color);
+  background-color: var(--notification-activated-background-color);
 }
 
-.wrapper.type-command:focus-visible .visible-wrapper {
-    outline-color: var(--border-focus-color);
-    outline-width: var(--global-size-spacing-border-weight-focusframe);
-    outline-style: solid;
+.wrapper.type-notification .visible-wrapper {
+  border-color: var(--notification-enabled-border-color);
+  background-color: var(--notification-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
 }
 
-.wrapper.type-command:hover .visible-wrapper {
-    border-color: var(--notification-hover-border-color);
-    background-color: var(--notification-hover-background-color);
+.wrapper.type-notification:focus-visible .visible-wrapper {
+  outline-color: var(--border-focus-color);
+  outline-width: var(--global-size-spacing-border-weight-focusframe);
+  outline-style: solid;
 }
 
-.wrapper.type-command:active .visible-wrapper {
-    border-color: var(--notification-pressed-border-color);
-    background-color: var(--notification-pressed-background-color);
+.wrapper.type-notification:hover .visible-wrapper {
+  border-color: var(--notification-hover-border-color);
+  background-color: var(--notification-hover-background-color);
 }
 
-.wrapper.type-command:disabled .visible-wrapper {
-    border-color: var(--notification-disabled-border-color);
-    background-color: var(--notification-disabled-background-color);
-    cursor: not-allowed;
-    color: var(--on-notification-disabled-color);
+.wrapper.type-notification:active .visible-wrapper {
+  border-color: var(--notification-pressed-border-color);
+  background-color: var(--notification-pressed-background-color);
 }
 
-.wrapper.type-command .visible-wrapper {
-            color: var(--on-running-active-color, #FFF);
-        }
-
-:is(.wrapper.type-command .visible-wrapper) .badge {
-                color: var(--on-running-active-color, #FFF);
-            }
+.wrapper.type-notification:disabled .visible-wrapper {
+  border-color: var(--notification-disabled-border-color);
+  background-color: var(--notification-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-notification-disabled-color);
+}
 
 .wrapper.type-notification {
-    cursor: pointer;
+    color: var(--on-notification-active-color);
 }
 
-.wrapper.type-notification:focus {
-    outline: none;
+.wrapper.type-advice {
+  cursor: pointer;
 }
 
-.wrapper.type-notification.activated .visible-wrapper {
-    border-color: var(--normal-activated-border-color);
-    background-color: var(--normal-activated-background-color);
+.wrapper.type-advice:focus {
+  outline: none;
 }
 
-.wrapper.type-notification .visible-wrapper {
-    border-color: var(--normal-enabled-border-color);
-    background-color: var(--normal-enabled-background-color);
-    border-width: 1px;
-    border-style: solid;
-    cursor: pointer;
+.wrapper.type-advice.activated .visible-wrapper {
+  border-color: var(--advice-activated-border-color);
+  background-color: var(--advice-activated-background-color);
 }
 
-.wrapper.type-notification:focus-visible .visible-wrapper {
-    outline-color: var(--border-focus-color);
-    outline-width: var(--global-size-spacing-border-weight-focusframe);
-    outline-style: solid;
+.wrapper.type-advice .visible-wrapper {
+  border-color: var(--advice-enabled-border-color);
+  background-color: var(--advice-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
 }
 
-.wrapper.type-notification:hover .visible-wrapper {
-    border-color: var(--normal-hover-border-color);
-    background-color: var(--normal-hover-background-color);
+.wrapper.type-advice:focus-visible .visible-wrapper {
+  outline-color: var(--border-focus-color);
+  outline-width: var(--global-size-spacing-border-weight-focusframe);
+  outline-style: solid;
 }
 
-.wrapper.type-notification:active .visible-wrapper {
-    border-color: var(--normal-pressed-border-color);
-    background-color: var(--normal-pressed-background-color);
+.wrapper.type-advice:hover .visible-wrapper {
+  border-color: var(--advice-hover-border-color);
+  background-color: var(--advice-hover-background-color);
 }
 
-.wrapper.type-notification:disabled .visible-wrapper {
-    border-color: var(--normal-disabled-border-color);
-    background-color: var(--normal-disabled-background-color);
-    cursor: not-allowed;
-    color: var(--on-normal-disabled-color);
+.wrapper.type-advice:active .visible-wrapper {
+  border-color: var(--advice-pressed-border-color);
+  background-color: var(--advice-pressed-background-color);
+}
+
+.wrapper.type-advice:disabled .visible-wrapper {
+  border-color: var(--advice-disabled-border-color);
+  background-color: var(--advice-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-advice-disabled-color);
 }
 
-.wrapper.type-notification .icon {
-            color: var(--instrument-enhanced-secondary-color);
-        }
+.wrapper.type-advice {
+    color: var(--on-advice-active-color);
+}
 
 .wrapper.type-none {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .wrapper.type-none:focus {
-    outline: none;
+  outline: none;
 }
 
 .wrapper.type-none.activated .visible-wrapper {
-    border-color: var(--normal-activated-border-color);
-    background-color: var(--normal-activated-background-color);
+  border-color: var(--normal-activated-border-color);
+  background-color: var(--normal-activated-background-color);
 }
 
 .wrapper.type-none .visible-wrapper {
-    border-color: var(--normal-enabled-border-color);
-    background-color: var(--normal-enabled-background-color);
-    border-width: 1px;
-    border-style: solid;
-    cursor: pointer;
+  border-color: var(--normal-enabled-border-color);
+  background-color: var(--normal-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
 }
 
 .wrapper.type-none:focus-visible .visible-wrapper {
-    outline-color: var(--border-focus-color);
-    outline-width: var(--global-size-spacing-border-weight-focusframe);
-    outline-style: solid;
+  outline-color: var(--border-focus-color);
+  outline-width: var(--global-size-spacing-border-weight-focusframe);
+  outline-style: solid;
 }
 
 .wrapper.type-none:hover .visible-wrapper {
-    border-color: var(--normal-hover-border-color);
-    background-color: var(--normal-hover-background-color);
+  border-color: var(--normal-hover-border-color);
+  background-color: var(--normal-hover-background-color);
 }
 
 .wrapper.type-none:active .visible-wrapper {
-    border-color: var(--normal-pressed-border-color);
-    background-color: var(--normal-pressed-background-color);
+  border-color: var(--normal-pressed-border-color);
+  background-color: var(--normal-pressed-background-color);
 }
 
 .wrapper.type-none:disabled .visible-wrapper {
-    border-color: var(--normal-disabled-border-color);
-    background-color: var(--normal-disabled-background-color);
-    cursor: not-allowed;
-    color: var(--on-normal-disabled-color);
+  border-color: var(--normal-disabled-border-color);
+  background-color: var(--normal-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-normal-disabled-color);
 }
 
 .wrapper.type-none {
-        color: var(--on-normal-active-color);
+    color: var(--on-normal-active-color);
 }
 
 .wrapper.type-none .icon {
-            color: var(--on-normal-neutral-color);
-        }
+      color: var(--on-normal-neutral-color);
+    }
 
 .wrapper.type-flat {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .wrapper.type-flat:focus {
-    outline: none;
+  outline: none;
 }
 
 .wrapper.type-flat.activated .visible-wrapper {
-    border-color: var(--flat-activated-border-color);
-    background-color: var(--flat-activated-background-color);
+  border-color: var(--flat-activated-border-color);
+  background-color: var(--flat-activated-background-color);
 }
 
 .wrapper.type-flat .visible-wrapper {
-    border-color: var(--flat-enabled-border-color);
-    background-color: var(--flat-enabled-background-color);
-    border-width: 1px;
-    border-style: solid;
-    cursor: pointer;
+  border-color: var(--flat-enabled-border-color);
+  background-color: var(--flat-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
 }
 
 .wrapper.type-flat:focus-visible .visible-wrapper {
-    outline-color: var(--border-focus-color);
-    outline-width: var(--global-size-spacing-border-weight-focusframe);
-    outline-style: solid;
+  outline-color: var(--border-focus-color);
+  outline-width: var(--global-size-spacing-border-weight-focusframe);
+  outline-style: solid;
 }
 
 .wrapper.type-flat:hover .visible-wrapper {
-    border-color: var(--flat-hover-border-color);
-    background-color: var(--flat-hover-background-color);
+  border-color: var(--flat-hover-border-color);
+  background-color: var(--flat-hover-background-color);
 }
 
 .wrapper.type-flat:active .visible-wrapper {
-    border-color: var(--flat-pressed-border-color);
-    background-color: var(--flat-pressed-background-color);
+  border-color: var(--flat-pressed-border-color);
+  background-color: var(--flat-pressed-background-color);
 }
 
 .wrapper.type-flat:disabled .visible-wrapper {
-    border-color: var(--flat-disabled-border-color);
-    background-color: var(--flat-disabled-background-color);
-    cursor: not-allowed;
-    color: var(--on-flat-disabled-color);
+  border-color: var(--flat-disabled-border-color);
+  background-color: var(--flat-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-flat-disabled-color);
 }
 
 .wrapper.type-flat {
-        color: var(--on-flat-active-color);
+    color: var(--on-flat-active-color);
 }
 
 .wrapper.type-flat .icon {
-            color: var(--on-flat-neutral-color);
-        }`;
+      color: var(--on-flat-neutral-color);
+    }
+`;
 export {
   compentStyle as default
 };