@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.57 → 2.0.0-next.59

package/src/main.css

@@ -1,4 +1,5 @@
 @import "palettes/variables.css";
+@import "palettes/manual.css";
 @import "components/radio/radio.css";
 
 html {

package/src/manual-icon/icon-alerts-critical-twotone.ts

@@ -0,0 +1,60 @@
+import {LitElement, html, css, svg} from 'lit';
+import {property} from 'lit/decorators.js';
+import {customElement} from '../decorator.js';
+
+/**
+ * `<obi-alerts-critical-twotone>` – Two-tone bell icon for the ISA "critical" 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 critical-severity alert needs an
+ * icon representation (badges, frames, lists).
+ *
+ * ### Features
+ * - **Color modes:** Set `useCssColor` to render with the critical design tokens
+ *   (`--alert-critical-color` / `--alert-critical-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 critical color
+ *   tokens instead of `currentColor`. Defaults to `false`.
+ */
+@customElement('obi-alerts-critical-twotone')
+export class ObiAlertsCriticalTwotone extends LitElement {
+  @property({type: Boolean}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 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>
+`;
+
+  private 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>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+      line-height: 0;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-alerts-critical-twotone': ObiAlertsCriticalTwotone;
+  }
+}

package/src/manual-icon/icon-alerts-diagnostic-twotone.ts

@@ -0,0 +1,60 @@
+import {LitElement, html, css, svg} from 'lit';
+import {property} from 'lit/decorators.js';
+import {customElement} from '../decorator.js';
+
+/**
+ * `<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`.
+ */
+@customElement('obi-alerts-diagnostic-twotone')
+export class ObiAlertsDiagnosticTwotone extends LitElement {
+  @property({type: Boolean}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 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>
+`;
+
+  private 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>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+      line-height: 0;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-alerts-diagnostic-twotone': ObiAlertsDiagnosticTwotone;
+  }
+}

package/src/mixins/alert.css

@@ -1,3 +1,32 @@
+@define-mixin alert-critical $wrapperClass {
+  &:focus {
+    outline: none;
+  }
+
+  & $(wrapperClass) {
+    border: 1px solid var(--critical-enabled-border-color);
+    background: var(--critical-enabled-background-color);
+  }
+
+  &:hover $(wrapperClass) {
+    border-color: var(--critical-hover-border-color);
+    background-color: var(--critical-hover-background-color);
+  }
+
+  &:active $(wrapperClass) {
+    border-color: var(--critical-pressed-border-color);
+    background-color: var(--critical-pressed-background-color);
+  }
+
+  &:focus-visible $(wrapperClass) {
+    background-color: var(--critical-focused-background-color);
+    border-color: var(--critical-focused-border-color);
+    outline-color: var(--border-outline-color);
+    outline-width: 4px;
+    outline-style: solid;
+  }
+}
+
 @define-mixin alert-alarm $wrapperClass {
   &:focus {
     outline: none;

package/src/navigation-instruments/gauge-radial/gauge-radial.css

@@ -0,0 +1,85 @@
+: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-readout-value {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+  }
+
+  .gauge-readout-meta {
+    position: absolute;
+    left: 50%;
+    top: var(--readout-meta-top);
+    transform: translateX(-50%);
+    z-index: 1;
+  }
+
+  &.type-needle .gauge-readout-meta {
+    top: var(--readout-meta-top-needle);
+  }
+
+  &.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. */
+  &.sector-90-left .gauge-readout-meta,
+  &.sector-90-right .gauge-readout-meta {
+    --readout-90-inset: 6%;
+    bottom: var(--readout-90-inset);
+    top: auto;
+    transform: none;
+  }
+
+  &.sector-90-left .gauge-readout-meta {
+    left: auto;
+    right: var(--readout-90-inset);
+  }
+
+  &.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). */
+  &.sector-90-right .gauge-readout-meta::part(value-wrapper) {
+    justify-self: start;
+  }
+}

package/src/navigation-instruments/gauge-radial/gauge-radial.stories.ts

@@ -1,33 +1,57 @@
 import type {Meta, StoryObj} from '@storybook/web-components-vite';
-import {ObcGaugeRadial, ObcGaugeRadialType} from './gauge-radial.js';
+import {
+  GaugeRadialSector,
+  ObcGaugeRadial,
+  ObcGaugeRadialType,
+} from './gauge-radial.js';
 import './gauge-radial.js';
 import {widthDecorator} from '../../storybook-util.js';
 import {AdviceType} from '../watch/advice.js';
 import {TickmarkStyle} from '../watch/tickmark.js';
 import {InstrumentState, Priority} from '../types.js';
 
-const meta: Meta<typeof ObcGaugeRadial> = {
+type GaugeRadialStoryArgs = Partial<ObcGaugeRadial> & {
+  width?: number;
+  height?: number;
+};
+
+const meta = {
   title: 'Instruments/Gauge Radial',
-  tags: ['6.0'],
+  tags: ['autodocs', '6.0'],
   component: 'obc-gauge-radial',
   decorators: [widthDecorator],
   args: {
     width: 400,
   },
   argTypes: {
-    state: {control: 'select', options: Object.values(InstrumentState)},
+    width: {control: {type: 'range', min: 100, max: 1000, step: 1}},
+    height: {control: {type: 'range', min: 100, max: 1000, step: 1}},
+    type: {control: 'select', options: Object.values(ObcGaugeRadialType)},
+    sector: {control: 'select', options: Object.values(GaugeRadialSector)},
     priority: {control: 'select', options: Object.values(Priority)},
-    tickmarksInside: {control: 'boolean'},
+    state: {control: 'select', options: Object.values(InstrumentState)},
     tickmarkStyle: {
       control: 'select',
       options: Object.values(TickmarkStyle),
     },
     showLabels: {control: 'boolean'},
+    tickmarksInside: {control: 'boolean'},
+    showReadout: {control: 'boolean'},
+    value: {control: 'number'},
+    minValue: {control: 'number'},
+    maxValue: {control: 'number'},
+    primaryTickmarkInterval: {control: 'number'},
+    secondaryTickmarkInterval: {control: 'number'},
+    tertiaryTickmarkInterval: {control: 'number'},
+    fractionDigits: {control: 'number'},
+    label: {control: 'text'},
+    unit: {control: 'text'},
+    advices: {control: 'object'},
   },
-} satisfies Meta<ObcGaugeRadial>;
+} satisfies Meta<GaugeRadialStoryArgs>;
 
 export default meta;
-type Story = StoryObj<ObcGaugeRadial>;
+type Story = StoryObj<GaugeRadialStoryArgs>;
 
 export const Positive: Story = {
   args: {
@@ -128,6 +152,124 @@ export const IrregularRange: Story = {
   },
 };
 
+const sectorStoryArgs = {
+  value: 50,
+  minValue: 0,
+  maxValue: 100,
+  type: ObcGaugeRadialType.filled,
+  showLabels: true,
+} as const;
+
+export const Sector270: Story = {
+  args: {
+    ...sectorStoryArgs,
+    sector: GaugeRadialSector.deg270,
+  },
+};
+
+export const Sector180: Story = {
+  args: {
+    ...sectorStoryArgs,
+    sector: GaugeRadialSector.deg180,
+  },
+};
+
+export const Sector180WithReadout: Story = {
+  args: {
+    ...sectorStoryArgs,
+    sector: GaugeRadialSector.deg180,
+    showReadout: true,
+    label: 'Label',
+    unit: 'unit',
+    value: 123,
+  },
+};
+
+// Regression for the width-derived "Max-min" end-label inset: wide labels on
+// both ends (-250 / 1000). The old per-side literals (11/6) broke for these;
+// min/max are interval multiples so the end labels sit on the primary grid.
+export const Sector180WideEndLabels: Story = {
+  args: {
+    ...sectorStoryArgs,
+    sector: GaugeRadialSector.deg180,
+    tickmarksInside: true,
+    minValue: -250,
+    maxValue: 1000,
+    value: 500,
+    primaryTickmarkInterval: 250,
+    secondaryTickmarkInterval: 50,
+  },
+};
+
+export const Sector90Left: Story = {
+  args: {
+    ...sectorStoryArgs,
+    sector: GaugeRadialSector.deg90Left,
+    width: 200,
+  },
+};
+
+export const Sector90Right: Story = {
+  args: {
+    ...sectorStoryArgs,
+    sector: GaugeRadialSector.deg90Right,
+    width: 200,
+  },
+};
+
+export const Sector90LeftWithReadout: Story = {
+  args: {
+    ...sectorStoryArgs,
+    sector: GaugeRadialSector.deg90Left,
+    showReadout: true,
+    label: 'Label',
+    unit: 'unit',
+    value: 123,
+    width: 200,
+  },
+};
+
+export const Sector90RightWithReadout: Story = {
+  args: {
+    ...sectorStoryArgs,
+    sector: GaugeRadialSector.deg90Right,
+    showReadout: true,
+    label: 'Label',
+    unit: 'unit',
+    value: 123,
+    width: 200,
+  },
+};
+
+const readoutStoryArgs = {
+  value: 123,
+  minValue: 0,
+  maxValue: 100,
+  type: ObcGaugeRadialType.filled,
+  sector: GaugeRadialSector.deg270,
+  showReadout: true,
+  label: 'Label',
+  unit: 'unit',
+} as const;
+
+export const WithReadout: Story = {
+  args: readoutStoryArgs,
+};
+
+export const WithReadoutEnhanced: Story = {
+  args: {
+    ...readoutStoryArgs,
+    priority: Priority.enhanced,
+  },
+};
+
+export const WithReadoutNeedle: Story = {
+  args: {
+    ...readoutStoryArgs,
+    type: ObcGaugeRadialType.needle,
+  },
+};
+
 export const WideAdviceSpan: Story = {
   args: {
     value: 320,