@oicl/openbridge-webcomponents 2.0.0-next.58 → 2.0.0-next.59

package/dist/manual-icon/icon-alerts-critical-twotone.js

@@ -0,0 +1,55 @@
+import { css, LitElement, svg, html } from "lit";
+import { property } from "lit/decorators.js";
+import { customElement } from "../decorator.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let ObiAlertsCriticalTwotone = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.useCssColor = false;
+    this.icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22Z" fill="currentColor"/>
+<path d="M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z" fill="currentColor"/>
+</svg>
+`;
+    this.iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22Z" style="fill: var(--alert-critical-color)"/>
+<path d="M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z" style="fill: var(--alert-critical-outline-color)"/>
+</svg>
+`;
+  }
+  render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+};
+ObiAlertsCriticalTwotone.styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+      line-height: 0;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  property({ type: Boolean })
+], ObiAlertsCriticalTwotone.prototype, "useCssColor", 2);
+ObiAlertsCriticalTwotone = __decorateClass([
+  customElement("obi-alerts-critical-twotone")
+], ObiAlertsCriticalTwotone);
+export {
+  ObiAlertsCriticalTwotone
+};
+//# sourceMappingURL=icon-alerts-critical-twotone.js.map

package/dist/manual-icon/icon-alerts-critical-twotone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-alerts-critical-twotone.js","sources":["../../src/manual-icon/icon-alerts-critical-twotone.ts"],"sourcesContent":["import {LitElement, html, css, svg} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../decorator.js';\n\n/**\n * `<obi-alerts-critical-twotone>` – Two-tone bell icon for the ISA \"critical\" alert severity.\n *\n * Renders the alert (bell) glyph as a layered two-tone shape so the silhouette and\n * fill can be tinted independently. Used wherever a critical-severity alert needs an\n * icon representation (badges, frames, lists).\n *\n * ### Features\n * - **Color modes:** Set `useCssColor` to render with the critical design tokens\n *   (`--alert-critical-color` / `--alert-critical-outline-color`); leave it `false`\n *   (default) to render with `currentColor` so the icon inherits its parent's color.\n *\n * ### Properties and Attributes\n * - `useCssColor` (boolean): When true, fills the two tones with the critical color\n *   tokens instead of `currentColor`. Defaults to `false`.\n */\n@customElement('obi-alerts-critical-twotone')\nexport class ObiAlertsCriticalTwotone extends LitElement {\n  @property({type: Boolean}) useCssColor = false;\n\n  private icon = svg`<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22Z\" fill=\"currentColor\"/>\n<path d=\"M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z\" fill=\"currentColor\"/>\n</svg>\n`;\n\n  private iconCss = svg`<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22Z\" style=\"fill: var(--alert-critical-color)\"/>\n<path d=\"M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z\" style=\"fill: var(--alert-critical-outline-color)\"/>\n</svg>\n`;\n\n  override render() {\n    return html`\n      <div class=\"wrapper\">${this.useCssColor ? this.iconCss : this.icon}</div>\n    `;\n  }\n\n  static override styles = css`\n    .wrapper {\n      height: 100%;\n      width: 100%;\n      line-height: 0;\n    }\n    .wrapper > * {\n      height: 100%;\n      width: 100%;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obi-alerts-critical-twotone': ObiAlertsCriticalTwotone;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAqBO,IAAM,2BAAN,cAAuC,WAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA;AACsB,SAAA,cAAc;AAEzC,SAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAMf,SAAQ,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAMT,SAAS;AAChB,WAAO;AAAA,6BACkB,KAAK,cAAc,KAAK,UAAU,KAAK,IAAI;AAAA;AAAA,EAEtE;AAaF;AAhCa,yBAqBK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AApBE,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GADd,yBACgB,WAAA,eAAA,CAAA;AADhB,2BAAN,gBAAA;AAAA,EADN,cAAc,6BAA6B;AAAA,GAC/B,wBAAA;"}

package/dist/manual-icon/icon-alerts-diagnostic-twotone.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+/**
+ * `<obi-alerts-diagnostic-twotone>` – Two-tone bell icon for the ISA "diagnostic" alert severity.
+ *
+ * Renders the alert (bell) glyph as a layered two-tone shape so the silhouette and
+ * fill can be tinted independently. Used wherever a diagnostic-severity alert needs an
+ * icon representation (badges, frames, lists).
+ *
+ * ### Features
+ * - **Color modes:** Set `useCssColor` to render with the diagnostic design tokens
+ *   (`--alert-diagnostic-color` / `--alert-diagnostic-outline-color`); leave it `false`
+ *   (default) to render with `currentColor` so the icon inherits its parent's color.
+ *
+ * ### Properties and Attributes
+ * - `useCssColor` (boolean): When true, fills the two tones with the diagnostic color
+ *   tokens instead of `currentColor`. Defaults to `false`.
+ */
+export declare class ObiAlertsDiagnosticTwotone extends LitElement {
+    useCssColor: boolean;
+    private icon;
+    private iconCss;
+    render(): import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obi-alerts-diagnostic-twotone': ObiAlertsDiagnosticTwotone;
+    }
+}
+//# sourceMappingURL=icon-alerts-diagnostic-twotone.d.ts.map

package/dist/manual-icon/icon-alerts-diagnostic-twotone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-alerts-diagnostic-twotone.d.ts","sourceRoot":"","sources":["../../src/manual-icon/icon-alerts-diagnostic-twotone.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAiB,MAAM,KAAK,CAAC;AAI/C;;;;;;;;;;;;;;;GAeG;AACH,qBACa,0BAA2B,SAAQ,UAAU;IAC7B,WAAW,UAAS;IAE/C,OAAO,CAAC,IAAI,CAIZ;IAEA,OAAO,CAAC,OAAO,CAIf;IAES,MAAM;IAMf,OAAgB,MAAM,0BAUpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,+BAA+B,EAAE,0BAA0B,CAAC;KAC7D;CACF"}

package/dist/manual-icon/icon-alerts-diagnostic-twotone.js

@@ -0,0 +1,55 @@
+import { css, LitElement, svg, html } from "lit";
+import { property } from "lit/decorators.js";
+import { customElement } from "../decorator.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let ObiAlertsDiagnosticTwotone = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.useCssColor = false;
+    this.icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22Z" fill="currentColor"/>
+<path d="M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z" fill="currentColor"/>
+</svg>
+`;
+    this.iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22Z" style="fill: var(--alert-diagnostic-color)"/>
+<path d="M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z" style="fill: var(--alert-diagnostic-outline-color)"/>
+</svg>
+`;
+  }
+  render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+};
+ObiAlertsDiagnosticTwotone.styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+      line-height: 0;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  property({ type: Boolean })
+], ObiAlertsDiagnosticTwotone.prototype, "useCssColor", 2);
+ObiAlertsDiagnosticTwotone = __decorateClass([
+  customElement("obi-alerts-diagnostic-twotone")
+], ObiAlertsDiagnosticTwotone);
+export {
+  ObiAlertsDiagnosticTwotone
+};
+//# sourceMappingURL=icon-alerts-diagnostic-twotone.js.map

package/dist/manual-icon/icon-alerts-diagnostic-twotone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-alerts-diagnostic-twotone.js","sources":["../../src/manual-icon/icon-alerts-diagnostic-twotone.ts"],"sourcesContent":["import {LitElement, html, css, svg} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../decorator.js';\n\n/**\n * `<obi-alerts-diagnostic-twotone>` – Two-tone bell icon for the ISA \"diagnostic\" alert severity.\n *\n * Renders the alert (bell) glyph as a layered two-tone shape so the silhouette and\n * fill can be tinted independently. Used wherever a diagnostic-severity alert needs an\n * icon representation (badges, frames, lists).\n *\n * ### Features\n * - **Color modes:** Set `useCssColor` to render with the diagnostic design tokens\n *   (`--alert-diagnostic-color` / `--alert-diagnostic-outline-color`); leave it `false`\n *   (default) to render with `currentColor` so the icon inherits its parent's color.\n *\n * ### Properties and Attributes\n * - `useCssColor` (boolean): When true, fills the two tones with the diagnostic color\n *   tokens instead of `currentColor`. Defaults to `false`.\n */\n@customElement('obi-alerts-diagnostic-twotone')\nexport class ObiAlertsDiagnosticTwotone extends LitElement {\n  @property({type: Boolean}) useCssColor = false;\n\n  private icon = svg`<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22Z\" fill=\"currentColor\"/>\n<path d=\"M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z\" fill=\"currentColor\"/>\n</svg>\n`;\n\n  private iconCss = svg`<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22Z\" style=\"fill: var(--alert-diagnostic-color)\"/>\n<path d=\"M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z\" style=\"fill: var(--alert-diagnostic-outline-color)\"/>\n</svg>\n`;\n\n  override render() {\n    return html`\n      <div class=\"wrapper\">${this.useCssColor ? this.iconCss : this.icon}</div>\n    `;\n  }\n\n  static override styles = css`\n    .wrapper {\n      height: 100%;\n      width: 100%;\n      line-height: 0;\n    }\n    .wrapper > * {\n      height: 100%;\n      width: 100%;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obi-alerts-diagnostic-twotone': ObiAlertsDiagnosticTwotone;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAqBO,IAAM,6BAAN,cAAyC,WAAW;AAAA,EAApD,cAAA;AAAA,UAAA,GAAA,SAAA;AACsB,SAAA,cAAc;AAEzC,SAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAMf,SAAQ,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAMT,SAAS;AAChB,WAAO;AAAA,6BACkB,KAAK,cAAc,KAAK,UAAU,KAAK,IAAI;AAAA;AAAA,EAEtE;AAaF;AAhCa,2BAqBK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AApBE,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GADd,2BACgB,WAAA,eAAA,CAAA;AADhB,6BAAN,gBAAA;AAAA,EADN,cAAc,+BAA+B;AAAA,GACjC,0BAAA;"}

package/dist/navigation-instruments/readout/readout.css.js

@@ -41,37 +41,22 @@ const componentStyle = css`
     grid-template-areas: "meta";
   }
 
-.readout:is(.alert-low-integrity,.alert-invalid,.alert-caution,.alert-warning,.alert-alarm) {
+.readout:is(.data-low-integrity,.data-invalid) {
     border-width: 1px;
     border-style: solid;
     border-radius: var(--global-border-radius-border-radius-base);
   }
 
-.readout.alert-low-integrity {
+.readout.data-low-integrity {
     background: var(--alert-low-integrity-background-color);
     border-color: var(--alert-low-integrity-border-color);
   }
 
-.readout.alert-invalid {
+.readout.data-invalid {
     background: var(--alert-invalid-background-color);
     border-color: var(--alert-invalid-border-color);
   }
 
-.readout.alert-caution {
-    background: var(--alert-caution-container-background-color);
-    border-color: var(--alert-caution-container-border-color);
-  }
-
-.readout.alert-warning {
-    background: var(--alert-warning-container-background-color);
-    border-color: var(--alert-warning-container-border-color);
-  }
-
-.readout.alert-alarm {
-    background: var(--alert-alarm-container-background-color);
-    border-color: var(--alert-alarm-container-border-color);
-  }
-
 .readout.stack {
     padding-bottom: calc(
       var(--obc-readout-padding-horizontal-safe) +

package/dist/navigation-instruments/readout/readout.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"readout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"readout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/navigation-instruments/readout/readout.d.ts

@@ -3,6 +3,7 @@ import { Priority } from '../types.js';
 import { ReadoutAdviceState, ReadoutAdviceFormat } from '../readout-advice/readout-advice.js';
 import { ReadoutSourceType } from './readout-source.js';
 import { ReadoutSetpointFormat, ReadoutSetpointSize } from '../readout-setpoint/readout-setpoint.js';
+import { AlertFrameConfig } from '../../components/alert-frame/alert-frame.js';
 import '../../components/context-menu-input/context-menu-input.js';
 import '../../icons/icon-input-right.js';
 import '../../icons/icon-placeholder.js';
@@ -13,13 +14,10 @@ export declare enum ReadoutVariant {
     enhanced = "enhanced",
     stack = "stack"
 }
-export declare enum ReadoutAlertState {
+export declare enum ReadoutDataState {
     none = "none",
     lowIntegrity = "low-integrity",
-    invalid = "invalid",
-    caution = "caution",
-    warning = "warning",
-    alarm = "alarm"
+    invalid = "invalid"
 }
 export declare enum ReadoutSetpointInteraction {
     alwaysVisible = "always-visible",
@@ -89,7 +87,7 @@ export declare class ObcReadout extends LitElement {
     src?: string;
     off: boolean;
     valuePriority?: Priority;
-    alertState: ReadoutAlertState;
+    dataState: ReadoutDataState;
     setpointInteraction: ReadoutSetpointInteraction;
     direction: ReadoutDirection;
     /**
@@ -119,6 +117,7 @@ export declare class ObcReadout extends LitElement {
     sourceDeltaValue: number;
     sourceType?: ReadoutSourceType;
     hasLeadingIcon: boolean;
+    alert: AlertFrameConfig | boolean;
     sourceHug: boolean;
     hasSourceLeadingIcon: boolean;
     hasSourceTrailingIcon: boolean;
@@ -220,7 +219,7 @@ export declare class ObcReadout extends LitElement {
     private renderValueInput;
     private renderHorizontalValueUnitZone;
     private renderHorizontalLayout;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit-html').HTMLTemplateResult;
     static styles: import('lit').CSSResult;
     disconnectedCallback(): void;
 }

package/dist/navigation-instruments/readout/readout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"readout.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/readout/readout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,2DAA2D,CAAC;AAMnE,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAC;AACrC,OAAO,iCAAiC,CAAC;AACzC,OAAO,iCAAiC,CAAC;AACzC,OAAO,EACL,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,qCAAqC,CAAC;AAM7C,OAAO,EACL,iBAAiB,EAGlB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAEL,qBAAqB,EAErB,mBAAmB,EACpB,MAAM,yCAAyC,CAAC;AACjD,OAAO,yCAAyC,CAAC;AAEjD,oBAAY,cAAc;IACxB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,KAAK,UAAU;CAChB;AAED,oBAAY,iBAAiB;IAC3B,IAAI,SAAS;IACb,YAAY,kBAAkB;IAC9B,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,oBAAY,0BAA0B;IACpC,aAAa,mBAAmB;IAChC,QAAQ,cAAc;IACtB,KAAK,WAAW;CACjB;AAED,oBAAY,gBAAgB;IAC1B,QAAQ,aAAa;IACrB,UAAU,eAAe;CAC1B;AAED,oBAAY,6BAA6B;IACvC,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AAED,OAAO,EAAC,iBAAiB,EAAC,CAAC;AAE3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,qBACa,UAAW,SAAQ,UAAU;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,UAAS;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,cAAc,CAA0B;IAChD,SAAS,UAAS;IACnB,KAAK,SAAM;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACZ,GAAG,UAAS;IACb,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB,UAAU,EAAE,iBAAiB,CAC9B;IACC,mBAAmB,EAAE,0BAA0B,CAC9B;IACjB,SAAS,EAAE,gBAAgB,CACzB;IAE5B;;;;;;;;;;;;OAYG;IACuB,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAE7D,SAAS,EAAE,6BAA6B,CACC;IACd,GAAG,UAAS;IACZ,kBAAkB,UAAS;IAC3B,gBAAgB,UAAS;IACzB,eAAe,UAAS;IACzB,cAAc,SAAK;IACnB,cAAc,SAAK;IAClB,mBAAmB,UAAS;IAE5B,SAAS,UAAS;IAClB,YAAY,UAAS;IACtB,gBAAgB,SAAK;IACrB,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC9B,cAAc,UAAS;IAEL,SAAS,UAAQ;IACnC,oBAAoB,UAAS;IACX,qBAAqB,UAAQ;IAC/C,SAAS,UAAS;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,mBAAmB,CAC7B;IACJ,WAAW,EAAE,kBAAkB,CAC5B;IACH,oBAAoB,EAAE,MAAM,GAAG,SAAS,CACtD;IACc,iBAAiB,SAAM;IACtB,oBAAoB,UAAS;IAC9B,cAAc,EAAE,qBAAqB,CAC/B;IACN,sBAAsB,EAAE,MAAM,GAAG,SAAS,CACxD;IACc,mBAAmB,SAAM;IACxB,sBAAsB,UAAS;IAG1D,OAAO,CAAC,yBAAyB,CAAwC;IAChE,OAAO,CAAC,0BAA0B,CAAS;IAC3C,OAAO,CAAC,mBAAmB,CAA2B;IAG/D,OAAO,CAAC,gBAAgB,CAAC,CAAkB;IAE3C,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAWlC;IAEF,OAAO,CAAC,yBAAyB,CAAqB;IAEtD,OAAO,CAAC,uBAAuB,CAAS;IAExC,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,KAAK,mBAAmB,GAM9B;IAED,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,2BAA2B,GAEtC;IAED,OAAO,CAAC,iBAAiB;IAoBzB,OAAO,CAAC,kCAAkC;IAgB1C,OAAO,CAAC,qBAAqB;IAI7B,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,KAAK,oBAAoB,GAK/B;IAED,OAAO,KAAK,uBAAuB,GAKlC;IAED,OAAO,KAAK,gCAAgC,GAgB3C;IAED,OAAO,CAAC,uBAAuB;IAQ/B,OAAO,KAAK,0BAA0B,GAErC;IAED,OAAO,KAAK,gBAAgB,GAI3B;IAED,OAAO,KAAK,2BAA2B,GAEtC;IAED,OAAO,KAAK,sBAAsB,GAajC;IAED,OAAO,KAAK,6BAA6B,GAexC;IAED,OAAO,KAAK,wBAAwB,GAEnC;IAED,OAAO,KAAK,QAAQ,GAInB;IAED,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,2BAA2B,CAKjD;IAEF,OAAO,CAAC,QAAQ;IAIhB,OAAO,KAAK,yBAAyB,GAKpC;IAED,OAAO,KAAK,2BAA2B,GAiCtC;IAED,OAAO,KAAK,yBAAyB,GAUpC;IAED,OAAO,KAAK,qBAAqB,GA4BhC;IAED;;;;;;;;;;;;;;;OAeG;IACH,OAAO,KAAK,mBAAmB,GAI9B;IAED;;;;;;;OAOG;IACH,OAAO,KAAK,uBAAuB,GAMlC;IAED,OAAO,KAAK,kBAAkB,GAW7B;IAED,OAAO,CAAC,8BAA8B;IAiBtC,OAAO,CAAC,4BAA4B;IAUpC,OAAO,CAAC,uBAAuB;IAgB/B,OAAO,CAAC,6BAA6B;IAWrC,OAAO,CAAC,uBAAuB;IAc/B,OAAO,CAAC,2BAA2B;IAiB1B,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IA4D/C,YAAY;IAIrB,OAAO,CAAC,YAAY;IA0CpB,OAAO,CAAC,cAAc;IAqEtB,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,eAAe;IAmBvB,OAAO,CAAC,YAAY;IAqCpB,OAAO,CAAC,yBAAyB;IAyBjC,OAAO,CAAC,sBAAsB;IAU9B,OAAO,CAAC,gBAAgB;IAkDxB,OAAO,CAAC,6BAA6B;IAYrC,OAAO,CAAC,sBAAsB;IA0CrB,MAAM;IA4Df,OAAgB,MAAM,0BAA6B;IAE1C,oBAAoB;CAK9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"readout.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/readout/readout.ts"],"names":[],"mappings":"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"}

package/dist/navigation-instruments/readout/readout.js

@@ -11,6 +11,7 @@ import { ReadoutAdviceFormat, ReadoutAdviceState } from "../readout-advice/reado
 import { renderReadoutUnitZone, renderReadoutLabelZone, renderReadoutMetaZone } from "./readout-meta.js";
 import { ReadoutSourceType, renderReadoutSource, supportsReadoutSourcePicker } from "./readout-source.js";
 import { ReadoutSetpointSize, ReadoutSetpointFormat, ReadoutSetpointMode, ReadoutSetpointVariant } from "../readout-setpoint/readout-setpoint.js";
+import { wrapWithAlertFrame } from "../../components/alert-frame/alert-frame.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -27,15 +28,12 @@ var ReadoutVariant = /* @__PURE__ */ ((ReadoutVariant2) => {
   ReadoutVariant2["stack"] = "stack";
   return ReadoutVariant2;
 })(ReadoutVariant || {});
-var ReadoutAlertState = /* @__PURE__ */ ((ReadoutAlertState2) => {
-  ReadoutAlertState2["none"] = "none";
-  ReadoutAlertState2["lowIntegrity"] = "low-integrity";
-  ReadoutAlertState2["invalid"] = "invalid";
-  ReadoutAlertState2["caution"] = "caution";
-  ReadoutAlertState2["warning"] = "warning";
-  ReadoutAlertState2["alarm"] = "alarm";
-  return ReadoutAlertState2;
-})(ReadoutAlertState || {});
+var ReadoutDataState = /* @__PURE__ */ ((ReadoutDataState2) => {
+  ReadoutDataState2["none"] = "none";
+  ReadoutDataState2["lowIntegrity"] = "low-integrity";
+  ReadoutDataState2["invalid"] = "invalid";
+  return ReadoutDataState2;
+})(ReadoutDataState || {});
 var ReadoutSetpointInteraction = /* @__PURE__ */ ((ReadoutSetpointInteraction2) => {
   ReadoutSetpointInteraction2["alwaysVisible"] = "always-visible";
   ReadoutSetpointInteraction2["flipFlop"] = "flip-flop";
@@ -61,7 +59,7 @@ let ObcReadout = class extends LitElement {
     this.hasDegree = false;
     this.label = "";
     this.off = false;
-    this.alertState = "none";
+    this.dataState = "none";
     this.setpointInteraction = "always-visible";
     this.direction = "vertical";
     this.alignment = "vertical";
@@ -76,6 +74,7 @@ let ObcReadout = class extends LitElement {
     this.hasSrcPicker = false;
     this.sourceDeltaValue = 0;
     this.hasLeadingIcon = false;
+    this.alert = false;
     this.sourceHug = true;
     this.hasSourceLeadingIcon = false;
     this.hasSourceTrailingIcon = true;
@@ -685,46 +684,46 @@ let ObcReadout = class extends LitElement {
     `;
   }
   render() {
-    return html`
-      <div
-        class=${classMap({
-      readout: true,
-      [this.variant]: true,
-      [this.direction]: true,
-      "alignment-left": this.alignment === "left",
-      "alignment-center": this.alignment === "center",
-      "alignment-vertical": this.alignment === "vertical",
-      "interaction-always-visible": this.interactionMode === "always-visible",
-      "interaction-flip-flop": this.setpointInteractionEnabled && this.interactionMode === "flip-flop",
-      "interaction-pop-up": this.setpointInteractionEnabled && this.interactionMode === "pop-up",
-      "focus-setpoint": this.setpointInteractionEnabled && this.flipFlopSetpointFocused,
-      "focus-value": this.setpointInteractionEnabled && this.flipFlopValueFocused,
-      "alert-none": this.alertState === "none",
-      "alert-low-integrity": this.alertState === "low-integrity",
-      "alert-invalid": this.alertState === "invalid",
-      "alert-caution": this.alertState === "caution",
-      "alert-warning": this.alertState === "warning",
-      "alert-alarm": this.alertState === "alarm",
-      "has-source": this.hasSrc,
-      "has-setpoint": this.hasSetpoint,
-      "has-setpoint-button": this.isHorizontal && this.setpointFormat === ReadoutSetpointFormat.button,
-      "no-hug": !this.hug,
-      "label-only": this.labelOnly
-    })}
-      >
-        ${!this.labelOnly && this.isVertical ? this.renderAdvice() : nothing}
-        ${!this.labelOnly && this.isVertical ? this.renderSetpoint() : nothing}
-        ${!this.labelOnly && this.isVertical ? this.renderValueZone() : nothing}
-        ${(this.labelOnly || this.isVertical) && this.shouldRenderReadoutMetaZone ? renderReadoutMetaZone({
-      labelValue: this.label,
-      unitValue: this.unit
-    }) : nothing}
-        ${!this.labelOnly && this.hasSrc && this.isVertical ? this.renderSource() : nothing}
-        ${!this.labelOnly && this.isHorizontal ? this.renderHorizontalLayout() : nothing}
-        ${this.renderSourcePickerSlot()}
-      </div>
-      ${this.renderSourcePickerContent()}
-    `;
+    return wrapWithAlertFrame(
+      this.alert,
+      html`
+        <div
+          class=${classMap({
+        readout: true,
+        [this.variant]: true,
+        [this.direction]: true,
+        "alignment-left": this.alignment === "left",
+        "alignment-center": this.alignment === "center",
+        "alignment-vertical": this.alignment === "vertical",
+        "interaction-always-visible": this.interactionMode === "always-visible",
+        "interaction-flip-flop": this.setpointInteractionEnabled && this.interactionMode === "flip-flop",
+        "interaction-pop-up": this.setpointInteractionEnabled && this.interactionMode === "pop-up",
+        "focus-setpoint": this.setpointInteractionEnabled && this.flipFlopSetpointFocused,
+        "focus-value": this.setpointInteractionEnabled && this.flipFlopValueFocused,
+        "data-none": this.dataState === "none",
+        "data-low-integrity": this.dataState === "low-integrity",
+        "data-invalid": this.dataState === "invalid",
+        "has-source": this.hasSrc,
+        "has-setpoint": this.hasSetpoint,
+        "has-setpoint-button": this.isHorizontal && this.setpointFormat === ReadoutSetpointFormat.button,
+        "no-hug": !this.hug,
+        "label-only": this.labelOnly
+      })}
+        >
+          ${!this.labelOnly && this.isVertical ? this.renderAdvice() : nothing}
+          ${!this.labelOnly && this.isVertical ? this.renderSetpoint() : nothing}
+          ${!this.labelOnly && this.isVertical ? this.renderValueZone() : nothing}
+          ${(this.labelOnly || this.isVertical) && this.shouldRenderReadoutMetaZone ? renderReadoutMetaZone({
+        labelValue: this.label,
+        unitValue: this.unit
+      }) : nothing}
+          ${!this.labelOnly && this.hasSrc && this.isVertical ? this.renderSource() : nothing}
+          ${!this.labelOnly && this.isHorizontal ? this.renderHorizontalLayout() : nothing}
+          ${this.renderSourcePickerSlot()}
+        </div>
+        ${this.renderSourcePickerContent()}
+      `
+    );
   }
   disconnectedCallback() {
     window.removeEventListener("pointerdown", this.onWindowPointerDown, true);
@@ -771,7 +770,7 @@ __decorateClass([
 ], ObcReadout.prototype, "valuePriority", 2);
 __decorateClass([
   property({ type: String })
-], ObcReadout.prototype, "alertState", 2);
+], ObcReadout.prototype, "dataState", 2);
 __decorateClass([
   property({ type: String })
 ], ObcReadout.prototype, "setpointInteraction", 2);
@@ -820,6 +819,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcReadout.prototype, "hasLeadingIcon", 2);
+__decorateClass([
+  property({ type: Object })
+], ObcReadout.prototype, "alert", 2);
 __decorateClass([
   property({ type: Boolean, attribute: false })
 ], ObcReadout.prototype, "sourceHug", 2);
@@ -879,7 +881,7 @@ ObcReadout = __decorateClass([
 ], ObcReadout);
 export {
   ObcReadout,
-  ReadoutAlertState,
+  ReadoutDataState,
   ReadoutDirection,
   ReadoutSetpointInteraction,
   ReadoutSourceType,