@oicl/openbridge-webcomponents 2.0.0-next.57 → 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/gauge-radial/gauge-radial.css.js

@@ -0,0 +1,99 @@
+import { css } from "lit";
+const componentStyle = css`
+          * {
+            -webkit-tap-highlight-color: transparent;
+          }
+
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* Host takes each sector's crop aspect (see \`sectorClips\`): 270/90 square, 180
+   wide — so the dial is the same size at any width. */
+
+:host([sector="270"]),
+:host([sector="90-left"]),
+:host([sector="90-right"]) {
+  height: auto;
+  aspect-ratio: 1;
+}
+
+/* 448 / 251 = the 180° crop's aspect (448 wide × 448·(1 − 44%) tall); keep in
+   sync with \`sectorClips\` bottom=44 in gauge-radial.ts. */
+
+:host([sector="180"]) {
+  height: auto;
+  aspect-ratio: 448 / 251;
+}
+
+.gauge-radial-root {
+  /* Readout vertical placement per layout (% of the cropped host), tuned to the
+     watch geometry — re-check if the ring radii or the 448 box change. Which
+     layout uses which is in renderReadouts(). */
+  --readout-meta-top: 72%;
+  --readout-meta-top-needle: 63%;
+  --readout-meta-top-180: 60%;
+
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.gauge-radial-root .gauge-readout-value {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+  }
+
+.gauge-radial-root .gauge-readout-meta {
+    position: absolute;
+    left: 50%;
+    top: var(--readout-meta-top);
+    transform: translateX(-50%);
+    z-index: 1;
+  }
+
+.gauge-radial-root.type-needle .gauge-readout-meta {
+    top: var(--readout-meta-top-needle);
+  }
+
+.gauge-radial-root.sector-180 .gauge-readout-meta {
+    top: var(--readout-meta-top-180);
+  }
+
+/* Nudge the corner readout inward (up + toward center) so it sits inside the
+     open quadrant rather than hugging the box corner. Symmetric for both
+     orientations — only the horizontal edge differs. */
+
+.gauge-radial-root.sector-90-left .gauge-readout-meta,.gauge-radial-root.sector-90-right .gauge-readout-meta {
+    --readout-90-inset: 6%;
+    bottom: var(--readout-90-inset);
+    top: auto;
+    transform: none;
+  }
+
+.gauge-radial-root.sector-90-left .gauge-readout-meta {
+    left: auto;
+    right: var(--readout-90-inset);
+  }
+
+.gauge-radial-root.sector-90-right .gauge-readout-meta {
+    left: var(--readout-90-inset);
+    right: auto;
+  }
+
+/* 90-right readout sits in the bottom-left corner, so left-align the value
+     under the label (enhanced readouts right-align the value by default). */
+
+.gauge-radial-root.sector-90-right .gauge-readout-meta::part(value-wrapper) {
+    justify-self: start;
+  }
+`;
+export {
+  componentStyle as default
+};
+//# sourceMappingURL=gauge-radial.css.js.map

package/dist/navigation-instruments/gauge-radial/gauge-radial.css.js.map

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

package/dist/navigation-instruments/gauge-radial/gauge-radial.d.ts

@@ -1,13 +1,20 @@
-import { LitElement } from 'lit';
+import { LitElement, TemplateResult } from 'lit';
 import { AdviceType } from '../watch/advice.js';
 import { InstrumentState, Priority } from '../types.js';
 import { TickmarkStyle } from '../watch/tickmark.js';
 import '../../building-blocks/instrument-radial/instrument-radial.js';
+import '../readout/readout.js';
 export declare enum ObcGaugeRadialType {
     filled = "filled",
     bar = "bar",
     needle = "needle"
 }
+export declare enum GaugeRadialSector {
+    deg270 = "270",
+    deg180 = "180",
+    deg90Left = "90-left",
+    deg90Right = "90-right"
+}
 export interface GaugeRadialAdvice {
     minValue: number;
     maxValue: number;
@@ -29,14 +36,17 @@ declare const ObcGaugeRadial_base: (new (...args: any[]) => import('../../svghel
  *
  * - **Three display types**: `filled` (solid arc), `bar` (thinner arc), and
  *   `needle` (pointer indicator) via the `type` property.
- * - **Full-range mapping**: The configured `minValue..maxValue` always spans
- *   the full 270° sweep. Symmetric ranges still place `0` at 12 o'clock.
+ * - **Sector sweep**: `sector` selects the arc span (`270`, `180`, `90-left`, or `90-right`).
+ *   The configured `minValue..maxValue` always spans the full sector. For the
+ *   centered sectors (`270`, `180`) a symmetric range places `0` at 12 o'clock;
+ *   for `90-left`/`90-right` the range midpoint sits at the middle of the quadrant.
  * - **Setpoint via mixin**: `setpoint`, `newSetpoint`, `touching`,
  *   `autoAtSetpointDeadband`, `setpointOverride`, and all other setpoint
  *   properties are provided by `SetpointMixin` and forwarded to the inner
  *   `<obc-instrument-radial>`.
  * - **Advice zones**: Pass an array of {@link GaugeRadialAdvice} objects to
- *   render caution/alert arcs on the gauge.
+ *   render caution/alert arcs on the gauge. Not shown on the `90-left` /
+ *   `90-right` sectors.
  *
  * ## Usage Guidelines
  *
@@ -45,6 +55,12 @@ declare const ObcGaugeRadial_base: (new (...args: any[]) => import('../../svghel
  * - Provide `primaryTickmarkInterval` and `secondaryTickmarkInterval` to
  *   control tickmark density.
  * - Enable `showLabels` to show numeric labels at primary tickmarks.
+ * - Enable `showReadout` with optional `label` and `unit`. Layout depends on `sector`
+ *   and `type`: **270** filled/bar — value at center + a label-only `meta` row in
+ *   the bottom gap (two separate readouts); **180** filled/bar — a single centered
+ *   stack (value + label/unit) at the bottom; **270** needle — bottom stack;
+ *   **180** needle — no readout; **90-left** / **90-right** filled/bar — corner
+ *   readout in a square host; **90** needle — no readout.
  *
  * ## Best Practices
  *
@@ -61,7 +77,7 @@ declare const ObcGaugeRadial_base: (new (...args: any[]) => import('../../svghel
  *   minValue="0"
  *   maxValue="100"
  *   type="filled"
- *   enhanced
+ *   priority="enhanced"
  *   showLabels
  *   primaryTickmarkInterval="25"
  *   secondaryTickmarkInterval="5"
@@ -89,9 +105,28 @@ export declare class ObcGaugeRadial extends ObcGaugeRadial_base {
     type: ObcGaugeRadialType;
     tickmarksInside: boolean;
     tickmarkStyle: TickmarkStyle;
+    /** Caution/alert arcs. Ignored on `sector: 90-left` / `90-right`. */
     advices: GaugeRadialAdvice[];
-    getAngle(v: number): number;
-    render(): import('lit-html').TemplateResult<1>;
+    sector: GaugeRadialSector;
+    showReadout: boolean;
+    label: string;
+    unit: string;
+    fractionDigits: number;
+    private get sectorAngles();
+    /**
+     * Per-edge crop (%) of the shared, origin-centered 448 SVG box each sector
+     * shows. All sectors render at the same natural scale, so the dial stays the
+     * same size; the sector only windows a different part (270 whole, 180 wide,
+     * 90 a quadrant).
+     */
+    private get sectorClips();
+    private get isSector90();
+    getAngle: (v: number) => number;
+    /** Renders one gauge readout; `withMeta`/`labelOnly` pick parts. */
+    private renderReadout;
+    private renderReadouts;
+    render(): TemplateResult<1>;
+    static styles: import('lit').CSSResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/navigation-instruments/gauge-radial/gauge-radial.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gauge-radial.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/gauge-radial/gauge-radial.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAGrC,OAAO,EAAC,UAAU,EAAC,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAC,eAAe,EAAE,QAAQ,EAAC,MAAM,aAAa,CAAC;AAEtD,OAAO,8DAA8D,CAAC;AACtE,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAC;AAEnD,oBAAY,kBAAkB;IAC5B,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,qBACa,cAAe,SAAQ,mBAAyB;IACjC,KAAK,SAAK;IACV,QAAQ,SAAO;IACf,QAAQ,SAAK;IACZ,UAAU,EAAE,OAAO,CAAS;IAC7B,uBAAuB,SAAM;IAC7B,yBAAyB,SAAM;IACzD;;;OAGG;IACuB,wBAAwB,EAAE,MAAM,GAAG,SAAS,CAC1D;IACc,KAAK,EAAE,eAAe,CAA0B;IAChD,QAAQ,EAAE,QAAQ,CAAoB;IACtC,IAAI,EAAE,kBAAkB,CACtB;IACD,eAAe,EAAE,OAAO,CAAS;IAClC,aAAa,EAAE,aAAa,CAC9B;IACmB,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAE7E,QAAQ,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;IASlB,MAAM;CA8BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
+{"version":3,"file":"gauge-radial.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/gauge-radial/gauge-radial.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA4B,KAAK,cAAc,EAAC,MAAM,KAAK,CAAC;AAK9E,OAAO,EAAC,UAAU,EAAC,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAC,eAAe,EAAE,QAAQ,EAAC,MAAM,aAAa,CAAC;AAEtD,OAAO,8DAA8D,CAAC;AACtE,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAC;AACnD,OAAO,uBAAuB,CAAC;AAM/B,oBAAY,kBAAkB;IAC5B,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,oBAAY,iBAAiB;IAC3B,MAAM,QAAQ;IACd,MAAM,QAAQ;IACd,SAAS,YAAY;IACrB,UAAU,aAAa;CACxB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,qBACa,cAAe,SAAQ,mBAAyB;IACjC,KAAK,SAAK;IACV,QAAQ,SAAO;IACf,QAAQ,SAAK;IACZ,UAAU,EAAE,OAAO,CAAS;IAC7B,uBAAuB,SAAM;IAC7B,yBAAyB,SAAM;IACzD;;;OAGG;IACuB,wBAAwB,EAAE,MAAM,GAAG,SAAS,CAC1D;IACc,KAAK,EAAE,eAAe,CAA0B;IAChD,QAAQ,EAAE,QAAQ,CAAoB;IACtC,IAAI,EAAE,kBAAkB,CACtB;IACD,eAAe,EAAE,OAAO,CAAS;IAClC,aAAa,EAAE,aAAa,CAC9B;IACxB,qEAAqE;IAC1B,OAAO,EAAE,iBAAiB,EAAE,CAAM;IACpC,MAAM,EAAE,iBAAiB,CACvC;IACA,WAAW,UAAS;IACrB,KAAK,SAAM;IACX,IAAI,SAAM;IACV,cAAc,SAAK;IAE7C,OAAO,KAAK,YAAY,GAYvB;IAED;;;;;OAKG;IACH,OAAO,KAAK,WAAW,GAiBtB;IAED,OAAO,KAAK,UAAU,GAKrB;IAID,QAAQ,GAAI,GAAG,MAAM,KAAG,MAAM,CAQ5B;IAEF,oEAAoE;IACpE,OAAO,CAAC,aAAa;IA+BrB,OAAO,CAAC,cAAc;IAiDb,MAAM;IAgDf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/navigation-instruments/gauge-radial/gauge-radial.js

@@ -1,10 +1,13 @@
-import { LitElement, html } from "lit";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import componentStyle from "./gauge-radial.css.js";
 import { customElement } from "../../decorator.js";
 import { property } from "lit/decorators.js";
 import { InstrumentState, Priority } from "../types.js";
 import { SetpointMixin } from "../../svghelpers/setpoint-mixin.js";
 import "../../building-blocks/instrument-radial/instrument-radial.js";
 import { TickmarkStyle } from "../watch/tickmark.js";
+import { ReadoutStackVerticalAlignment, ReadoutVariant } from "../readout/readout.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -21,6 +24,13 @@ var ObcGaugeRadialType = /* @__PURE__ */ ((ObcGaugeRadialType2) => {
   ObcGaugeRadialType2["needle"] = "needle";
   return ObcGaugeRadialType2;
 })(ObcGaugeRadialType || {});
+var GaugeRadialSector = /* @__PURE__ */ ((GaugeRadialSector2) => {
+  GaugeRadialSector2["deg270"] = "270";
+  GaugeRadialSector2["deg180"] = "180";
+  GaugeRadialSector2["deg90Left"] = "90-left";
+  GaugeRadialSector2["deg90Right"] = "90-right";
+  return GaugeRadialSector2;
+})(GaugeRadialSector || {});
 let ObcGaugeRadial = class extends SetpointMixin(LitElement) {
   constructor() {
     super(...arguments);
@@ -37,45 +47,166 @@ let ObcGaugeRadial = class extends SetpointMixin(LitElement) {
     this.tickmarksInside = false;
     this.tickmarkStyle = TickmarkStyle.regular;
     this.advices = [];
+    this.sector = "270";
+    this.showReadout = false;
+    this.label = "";
+    this.unit = "";
+    this.fractionDigits = 0;
+    this.getAngle = (v) => {
+      const { sweep, start } = this.sectorAngles;
+      const span = this.maxValue - this.minValue;
+      if (!Number.isFinite(span) || span <= 0) {
+        return start;
+      }
+      return (v - this.minValue) / span * sweep + start;
+    };
   }
-  getAngle(v) {
-    const span = this.maxValue - this.minValue;
-    if (!Number.isFinite(span) || span <= 0) {
-      return -135;
+  get sectorAngles() {
+    switch (this.sector) {
+      case "180":
+        return { sweep: 180, start: -90 };
+      case "90-left":
+        return { sweep: 90, start: -90 };
+      case "90-right":
+        return { sweep: 90, start: 0 };
+      case "270":
+      default:
+        return { sweep: 270, start: -135 };
     }
-    return (v - this.minValue) / span * 270 - 135;
+  }
+  /**
+   * Per-edge crop (%) of the shared, origin-centered 448 SVG box each sector
+   * shows. All sectors render at the same natural scale, so the dial stays the
+   * same size; the sector only windows a different part (270 whole, 180 wide,
+   * 90 a quadrant).
+   */
+  get sectorClips() {
+    switch (this.sector) {
+      case "180":
+        return { top: 0, bottom: 44, left: 0, right: 0 };
+      case "90-left":
+        return { top: 0, bottom: 45, left: 0, right: 45 };
+      case "90-right":
+        return { top: 0, bottom: 45, left: 45, right: 0 };
+      case "270":
+      default:
+        return { top: 0, bottom: 0, left: 0, right: 0 };
+    }
+  }
+  get isSector90() {
+    return this.sector === "90-left" || this.sector === "90-right";
+  }
+  /** Renders one gauge readout; `withMeta`/`labelOnly` pick parts. */
+  renderReadout({
+    className,
+    variant,
+    alignment = ReadoutStackVerticalAlignment.vertical,
+    withMeta = true,
+    labelOnly = false
+  }) {
+    const withValue = !labelOnly;
+    return html`
+      <obc-readout
+        class=${className}
+        direction="vertical"
+        ?labelOnly=${labelOnly}
+        .variant=${variant}
+        .alignment=${alignment}
+        .valuePriority=${withValue ? this.priority : void 0}
+        .value=${withValue ? this.value : void 0}
+        .fractionDigits=${this.fractionDigits}
+        .label=${withMeta ? this.label : ""}
+        .unit=${withMeta ? this.unit : ""}
+      ></obc-readout>
+    `;
+  }
+  renderReadouts() {
+    if (!this.showReadout) {
+      return nothing;
+    }
+    const isNeedle = this.type === "needle";
+    const is90 = this.isSector90;
+    const is180 = this.sector === "180";
+    if (isNeedle && (is180 || is90)) {
+      return nothing;
+    }
+    if (is90) {
+      return this.renderReadout({
+        className: "gauge-readout-meta",
+        variant: ReadoutVariant.enhanced
+      });
+    }
+    if (isNeedle || is180) {
+      return this.renderReadout({
+        className: "gauge-readout-meta",
+        variant: ReadoutVariant.stack,
+        alignment: ReadoutStackVerticalAlignment.center
+      });
+    }
+    return html`
+      ${this.renderReadout({
+      className: "gauge-readout-value",
+      variant: ReadoutVariant.enhanced,
+      withMeta: false
+    })}
+      ${this.label || this.unit ? this.renderReadout({
+      className: "gauge-readout-meta",
+      variant: ReadoutVariant.stack,
+      alignment: ReadoutStackVerticalAlignment.center,
+      labelOnly: true
+    }) : nothing}
+    `;
   }
   render() {
+    const clips = this.sectorClips;
     return html`
-      <obc-instrument-radial
-        .value=${this.value}
-        .state=${this.state}
-        .priority=${this.priority}
-        .setpoint=${this.setpoint}
-        .newSetpoint=${this.newSetpoint}
-        .setpointAtZeroDeadband=${this.setpointAtZeroDeadband}
-        .setpointOverride=${this.setpointOverride}
-        .touching=${this.touching}
-        .autoAtSetpoint=${this.autoAtSetpoint}
-        .autoAtSetpointDeadband=${this.autoAtSetpointDeadband}
-        .animateSetpoint=${this.animateSetpoint}
-        .maxValue=${this.maxValue}
-        .minValue=${this.minValue}
-        .getAngle=${this.getAngle}
-        .showLabels=${this.showLabels}
-        .primaryTickmarkInterval=${this.primaryTickmarkInterval}
-        .secondaryTickmarkInterval=${this.secondaryTickmarkInterval}
-        .tertiaryTickmarkInterval=${this.tertiaryTickmarkInterval}
-        .type=${this.type}
-        .needleType=${this.type}
-        .tickmarksInside=${this.tickmarksInside}
-        .tickmarkStyle=${this.tickmarkStyle}
-        .advices=${this.advices}
+      <div
+        class=${classMap({
+      "gauge-radial-root": true,
+      "type-needle": this.type === "needle",
+      "sector-180": this.sector === "180",
+      "sector-90-left": this.sector === "90-left",
+      "sector-90-right": this.sector === "90-right"
+      /* deg90Right */
+    })}
       >
-      </obc-instrument-radial>
+        <obc-instrument-radial
+          .value=${this.value}
+          .state=${this.state}
+          .priority=${this.priority}
+          .setpoint=${this.setpoint}
+          .newSetpoint=${this.newSetpoint}
+          .setpointAtZeroDeadband=${this.setpointAtZeroDeadband}
+          .setpointOverride=${this.setpointOverride}
+          .touching=${this.touching}
+          .autoAtSetpoint=${this.autoAtSetpoint}
+          .autoAtSetpointDeadband=${this.autoAtSetpointDeadband}
+          .animateSetpoint=${this.animateSetpoint}
+          .maxValue=${this.maxValue}
+          .minValue=${this.minValue}
+          .getAngle=${this.getAngle}
+          .showLabels=${this.showLabels}
+          .primaryTickmarkInterval=${this.primaryTickmarkInterval}
+          .secondaryTickmarkInterval=${this.secondaryTickmarkInterval}
+          .tertiaryTickmarkInterval=${this.tertiaryTickmarkInterval}
+          .type=${this.type}
+          .needleType=${this.type}
+          .tickmarksInside=${this.tickmarksInside}
+          .tickmarkStyle=${this.tickmarkStyle}
+          .advices=${this.isSector90 ? [] : this.advices}
+          .clipTop=${clips.top}
+          .clipBottom=${clips.bottom}
+          .clipLeft=${clips.left}
+          .clipRight=${clips.right}
+          .endLabelsMaxMin=${this.sector === "180"}
+        >
+        </obc-instrument-radial>
+        ${this.renderReadouts()}
+      </div>
     `;
   }
 };
+ObcGaugeRadial.styles = unsafeCSS(componentStyle);
 __decorateClass([
   property({ type: Number })
 ], ObcGaugeRadial.prototype, "value", 2);
@@ -115,10 +246,26 @@ __decorateClass([
 __decorateClass([
   property({ type: Array, attribute: false })
 ], ObcGaugeRadial.prototype, "advices", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], ObcGaugeRadial.prototype, "sector", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcGaugeRadial.prototype, "showReadout", 2);
+__decorateClass([
+  property({ type: String })
+], ObcGaugeRadial.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], ObcGaugeRadial.prototype, "unit", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcGaugeRadial.prototype, "fractionDigits", 2);
 ObcGaugeRadial = __decorateClass([
   customElement("obc-gauge-radial")
 ], ObcGaugeRadial);
 export {
+  GaugeRadialSector,
   ObcGaugeRadial,
   ObcGaugeRadialType
 };