@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.129 → 2.0.0-next.131

package/dist/components/progress-bar/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","sources":["../../../src/components/progress-bar/progress-bar.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport componentStyle from './progress-bar.css?inline';\nimport {customElement} from '../../decorator.js';\nimport '../../icons/icon-placeholder.js';\nimport {CircularProgressMode} from '../../building-blocks/circular-progress/circular-progress.js';\n\nexport enum ProgressBarType {\n  linear = 'linear',\n  circular = 'circular',\n}\n\nexport enum ProgressBarMode {\n  determinate = 'determinate',\n  indeterminate = 'indeterminate',\n}\n\nexport enum CircularProgressState {\n  determinate = 'determinate',\n  indeterminate = 'indeterminate',\n  icon = 'icon',\n}\n\n/**\n * `<obc-progress-bar>` – A status-only progress indicator (progress meter / spinner /\n * loading indicator) for visualizing how far a task has advanced.\n *\n * Displays the progress of an ongoing operation either as a horizontal bar or as a circular\n * ring. Unlike `<obc-progress-button>`, this is a passive, non-interactive display element:\n * it shows status only and emits no events. Use it to communicate determinate progress\n * (a known percentage) or an open-ended \"working\" state.\n *\n * ## Features / Variants\n *\n * **Layout types (`type`)**\n * - **Linear** (default): A horizontal bar with an optional value label above and an optional\n *   description below. Best inline within content where horizontal space is available.\n * - **Circular**: A ring with centered content. Best for compact, icon-led, or centered status.\n *\n * **Linear modes (`mode`)**\n * - **Determinate** (default): Fills proportionally to `value` (0–100); the label shows the\n *   rounded percentage.\n * - **Indeterminate**: Animated, looping fill for work of unknown duration; the label shows\n *   \"Loading\".\n *\n * **Circular states (`circularState`)**\n * - **Determinate**: Ring fills to `value`, with the rounded number (and optional `%` unit) centered.\n * - **Indeterminate**: Animated ring with the `icon` slot centered.\n * - **Icon**: A full ring acting as a frame around the centered `icon` slot (defaults to a placeholder).\n *\n * **Circular progressive indeterminate (`progressiveIndeterminate`)**\n * - A spinning arc that also grows with `value`, blending an indeterminate animation with a\n *   numeric readout. Takes precedence over `circularState` when enabled.\n *\n * ## Usage Guidelines\n *\n * Use a progress bar to report the status of a task the user is waiting on. Choose\n * **determinate** when the completion percentage is known and **indeterminate** when it is not.\n * Pick the **linear** type for inline, full-width contexts and the **circular** type for compact\n * or centered placements. Because this component is display-only, pair it with a separate\n * control (such as `<obc-progress-button>`) when the user also needs to trigger or cancel the action.\n *\n * ## Slots\n *\n * | Slot   | Renders When...                                              | Purpose                                   |\n * | ------ | ----------------------------------------------------------- | ----------------------------------------- |\n * | `icon` | `type=\"circular\"` && `circularState` is `indeterminate` or `icon` | Centered icon inside the circular ring. |\n *\n * @example\n * ```html\n * <obc-progress-bar\n *   type=\"linear\"\n *   mode=\"determinate\"\n *   value=\"65\"\n *   showValue\n *   hasDescription\n *   description=\"Uploading files...\"\n * ></obc-progress-bar>\n * ```\n *\n * @slot icon - Centered icon for the circular `indeterminate` and `icon` states.\n * @stable\n */\n@customElement('obc-progress-bar')\nexport class ObcProgressBar extends LitElement {\n  /** Layout type: `linear` (horizontal bar) or `circular` (ring). */\n  @property({type: String}) type: ProgressBarType = ProgressBarType.linear;\n  /**\n   * Progress mode: `determinate` tracks `value`, `indeterminate` loops indefinitely.\n   * @availableWhen type==linear\n   */\n  @property({type: String}) mode: ProgressBarMode = ProgressBarMode.determinate;\n  /**\n   * Circular display state: `determinate` (numeric ring), `indeterminate` (animated ring with\n   * icon), or `icon` (ring framing the icon slot).\n   * @availableWhen type==circular\n   */\n  @property({type: String}) circularState: CircularProgressState =\n    CircularProgressState.determinate;\n  /** Progress percentage (0–100); clamped when rendered. */\n  @property({type: Number}) value = 0;\n  /**\n   * Shows the value label above the bar (percentage when determinate, \"Loading\" when indeterminate).\n   * @availableWhen type==linear\n   */\n  @property({type: Boolean}) showValue = false;\n  /**\n   * Appends a `%` unit next to the centered value.\n   * @availableWhen type==circular && (progressiveIndeterminate==true || circularState==determinate)\n   */\n  @property({type: Boolean}) showUnit = false;\n  /**\n   * Shows the `description` text below the bar.\n   * @availableWhen type==linear\n   */\n  @property({type: Boolean}) hasDescription = false;\n  /**\n   * Description text rendered below the bar.\n   * @availableWhen type==linear && hasDescription==true\n   */\n  @property({type: String}) description = 'Description text';\n  /**\n   * Shows the `stateLabel` next to the value.\n   *\n   * **TODO(designer):** Confirm the intended purpose of the state indicator — the story labels\n   * this a \"future feature\".\n   * @availableWhen type==linear && showValue==true && mode==determinate\n   */\n  @property({type: Boolean}) showState = false;\n  /**\n   * Text shown alongside the value when `showState` is enabled.\n   * @availableWhen type==linear && showValue==true && mode==determinate && showState==true\n   */\n  @property({type: String}) stateLabel = 'Open';\n  /**\n   * Uses a progressive indeterminate ring (spinning arc that grows with `value`); takes\n   * precedence over `circularState`.\n   * @availableWhen type==circular\n   */\n  @property({type: Boolean}) progressiveIndeterminate = false;\n\n  override render() {\n    if (this.type === ProgressBarType.circular) {\n      return this.renderCircularProgress();\n    }\n\n    return this.renderLinearProgress();\n  }\n\n  private getCircularProgressMode(): CircularProgressMode {\n    if (this.progressiveIndeterminate) {\n      return CircularProgressMode.progressiveIndeterminate;\n    }\n    if (this.circularState === CircularProgressState.icon) {\n      return CircularProgressMode.determinate;\n    }\n    if (this.circularState === CircularProgressState.indeterminate) {\n      return CircularProgressMode.indeterminate;\n    }\n    return CircularProgressMode.determinate;\n  }\n\n  private renderCircularProgress() {\n    const progressValue =\n      this.circularState === CircularProgressState.icon ? 100 : this.value;\n\n    return html`\n      <div class=\"circular-wrapper\">\n        <obc-circular-progress\n          .mode=${this.getCircularProgressMode()}\n          .value=${progressValue}\n          .viewBoxSize=${48}\n          .strokeWidth=${4}\n        ></obc-circular-progress>\n\n        <div class=\"circular-content\">${this.renderCircularContent()}</div>\n      </div>\n    `;\n  }\n\n  private renderCircularContent() {\n    if (this.progressiveIndeterminate) {\n      return html`\n        <div class=\"circular-label-container\">\n          <span class=\"circular-value\">${Math.round(this.value)}</span>\n          ${this.showUnit\n            ? html`<span class=\"circular-unit\">%</span>`\n            : nothing}\n        </div>\n      `;\n    }\n\n    if (this.circularState === CircularProgressState.determinate) {\n      return html`\n        <div class=\"circular-label-container\">\n          <span class=\"circular-value\">${Math.round(this.value)}</span>\n          ${this.showUnit\n            ? html`<span class=\"circular-unit\">%</span>`\n            : nothing}\n        </div>\n      `;\n    } else if (this.circularState === CircularProgressState.indeterminate) {\n      return html`\n        <div class=\"circular-label-container\">\n          <span class=\"circular-value\">\n            <slot name=\"icon\">...</slot>\n          </span>\n        </div>\n      `;\n    } else {\n      return html`\n        <div class=\"circular-icon-container\">\n          <slot name=\"icon\">\n            <obi-placeholder></obi-placeholder>\n          </slot>\n        </div>\n      `;\n    }\n  }\n\n  private renderLinearProgress() {\n    const clampedValue = Math.max(0, Math.min(100, this.value));\n    const progressWidth = `${clampedValue}%`;\n\n    return html`\n      <div class=\"wrapper\">\n        ${this.showValue ? this.renderLabel() : ''}\n\n        <div class=\"bar\">\n          ${this.mode === ProgressBarMode.determinate\n            ? html`\n                <div\n                  class=\"loaded\"\n                  style=${styleMap({width: progressWidth})}\n                ></div>\n              `\n            : html` <div class=\"indeterminate-track\"></div> `}\n        </div>\n\n        ${this.hasDescription\n          ? html`\n              <div class=\"description-container\">\n                <span class=\"description-text\">${this.description}</span>\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n\n  private renderLabel() {\n    if (this.mode === ProgressBarMode.determinate) {\n      return html`\n        <div class=\"label-container\">\n          <div class=\"value-frame\">\n            <span class=\"value-number\">${Math.round(this.value)}</span>\n            <span class=\"value-unit\">%</span>\n          </div>\n          ${this.showState\n            ? html` <span class=\"state\">${this.stateLabel}</span> `\n            : nothing}\n        </div>\n      `;\n    } else {\n      return html`\n        <div class=\"label-container\">\n          <span class=\"loading-text\">Loading</span>\n        </div>\n      `;\n    }\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-progress-bar': ObcProgressBar;\n  }\n}\n"],"names":["ProgressBarType","ProgressBarMode","CircularProgressState"],"mappings":"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"}
+{"version":3,"file":"progress-bar.js","sources":["../../../src/components/progress-bar/progress-bar.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport componentStyle from './progress-bar.css?inline';\nimport {customElement} from '../../decorator.js';\nimport '../../icons/icon-placeholder.js';\nimport {CircularProgressMode} from '../../building-blocks/circular-progress/circular-progress.js';\nimport {Priority} from '../../navigation-instruments/types.js';\n\nexport {Priority};\n\nexport enum ProgressBarType {\n  linear = 'linear',\n  circular = 'circular',\n}\n\nexport enum ProgressBarMode {\n  determinate = 'determinate',\n  indeterminate = 'indeterminate',\n}\n\nexport enum CircularProgressState {\n  determinate = 'determinate',\n  indeterminate = 'indeterminate',\n  icon = 'icon',\n}\n\n/**\n * `<obc-progress-bar>` – A status-only progress indicator (progress meter / spinner /\n * loading indicator) for visualizing how far a task has advanced.\n *\n * Displays the progress of an ongoing operation either as a horizontal bar or as a circular\n * ring. Unlike `<obc-progress-button>`, this is a passive, non-interactive display element:\n * it shows status only and emits no events. Use it to communicate determinate progress\n * (a known percentage) or an open-ended \"working\" state.\n *\n * ## Features / Variants\n *\n * **Layout types (`type`)**\n * - **Linear** (default): A horizontal bar with an optional value label above and an optional\n *   description below. Best inline within content where horizontal space is available.\n * - **Circular**: A ring with centered content. Best for compact, icon-led, or centered status.\n *\n * **Linear modes (`mode`)**\n * - **Determinate** (default): Fills proportionally to `value` (0–100); the label shows the\n *   rounded percentage.\n * - **Indeterminate**: Animated, looping fill for work of unknown duration; the label shows\n *   \"Loading\".\n *\n * **Color priority (`priority`)**\n * - **Enhanced** (default): Blue fill, for a bar that reads as the primary value.\n * - **Regular**: Neutral gray fill, for a bar that should recede as ancillary status.\n *\n * **Circular states (`circularState`)**\n * - **Determinate**: Ring fills to `value`, with the rounded number (and optional `%` unit) centered.\n * - **Indeterminate**: Animated ring with the `icon` slot centered.\n * - **Icon**: A full ring acting as a frame around the centered `icon` slot (defaults to a placeholder).\n *\n * **Circular progressive indeterminate (`progressiveIndeterminate`)**\n * - A spinning arc that also grows with `value`, blending an indeterminate animation with a\n *   numeric readout. Takes precedence over `circularState` when enabled.\n *\n * ## Usage Guidelines\n *\n * Use a progress bar to report the status of a task the user is waiting on. Choose\n * **determinate** when the completion percentage is known and **indeterminate** when it is not.\n * Pick the **linear** type for inline, full-width contexts and the **circular** type for compact\n * or centered placements. Because this component is display-only, pair it with a separate\n * control (such as `<obc-progress-button>`) when the user also needs to trigger or cancel the action.\n *\n * ## Slots\n *\n * | Slot   | Renders When...                                              | Purpose                                   |\n * | ------ | ----------------------------------------------------------- | ----------------------------------------- |\n * | `icon` | `type=\"circular\"` && `circularState` is `indeterminate` or `icon` | Centered icon inside the circular ring. |\n *\n * @example\n * ```html\n * <obc-progress-bar\n *   type=\"linear\"\n *   mode=\"determinate\"\n *   value=\"65\"\n *   showValue\n *   hasDescription\n *   description=\"Uploading files...\"\n * ></obc-progress-bar>\n * ```\n *\n * @slot icon - Centered icon for the circular `indeterminate` and `icon` states.\n * @stable\n */\n@customElement('obc-progress-bar')\nexport class ObcProgressBar extends LitElement {\n  /** Layout type: `linear` (horizontal bar) or `circular` (ring). */\n  @property({type: String}) type: ProgressBarType = ProgressBarType.linear;\n  /**\n   * Progress mode: `determinate` tracks `value`, `indeterminate` loops indefinitely.\n   * @availableWhen type==linear\n   */\n  @property({type: String}) mode: ProgressBarMode = ProgressBarMode.determinate;\n  /**\n   * Circular display state: `determinate` (numeric ring), `indeterminate` (animated ring with\n   * icon), or `icon` (ring framing the icon slot).\n   * @availableWhen type==circular\n   */\n  @property({type: String}) circularState: CircularProgressState =\n    CircularProgressState.determinate;\n  /**\n   * Color emphasis of the bar fill: `regular` (gray) or `enhanced` (blue).\n   * @availableWhen type==linear\n   */\n  @property({type: String}) priority: Priority = Priority.enhanced;\n  /** Progress percentage (0–100); clamped when rendered. */\n  @property({type: Number}) value = 0;\n  /**\n   * Shows the value label above the bar (percentage when determinate, \"Loading\" when indeterminate).\n   * @availableWhen type==linear\n   */\n  @property({type: Boolean}) showValue = false;\n  /**\n   * Appends a `%` unit next to the centered value.\n   * @availableWhen type==circular && (progressiveIndeterminate==true || circularState==determinate)\n   */\n  @property({type: Boolean}) showUnit = false;\n  /**\n   * Shows the `description` text below the bar.\n   * @availableWhen type==linear\n   */\n  @property({type: Boolean}) hasDescription = false;\n  /**\n   * Description text rendered below the bar.\n   * @availableWhen type==linear && hasDescription==true\n   */\n  @property({type: String}) description = 'Description text';\n  /**\n   * Shows the `stateLabel` next to the value.\n   *\n   * **TODO(designer):** Confirm the intended purpose of the state indicator — the story labels\n   * this a \"future feature\".\n   * @availableWhen type==linear && showValue==true && mode==determinate\n   */\n  @property({type: Boolean}) showState = false;\n  /**\n   * Text shown alongside the value when `showState` is enabled.\n   * @availableWhen type==linear && showValue==true && mode==determinate && showState==true\n   */\n  @property({type: String}) stateLabel = 'Open';\n  /**\n   * Uses a progressive indeterminate ring (spinning arc that grows with `value`); takes\n   * precedence over `circularState`.\n   * @availableWhen type==circular\n   */\n  @property({type: Boolean}) progressiveIndeterminate = false;\n\n  override render() {\n    if (this.type === ProgressBarType.circular) {\n      return this.renderCircularProgress();\n    }\n\n    return this.renderLinearProgress();\n  }\n\n  private getCircularProgressMode(): CircularProgressMode {\n    if (this.progressiveIndeterminate) {\n      return CircularProgressMode.progressiveIndeterminate;\n    }\n    if (this.circularState === CircularProgressState.icon) {\n      return CircularProgressMode.determinate;\n    }\n    if (this.circularState === CircularProgressState.indeterminate) {\n      return CircularProgressMode.indeterminate;\n    }\n    return CircularProgressMode.determinate;\n  }\n\n  private renderCircularProgress() {\n    const progressValue =\n      this.circularState === CircularProgressState.icon ? 100 : this.value;\n\n    return html`\n      <div class=\"circular-wrapper\">\n        <obc-circular-progress\n          .mode=${this.getCircularProgressMode()}\n          .value=${progressValue}\n          .viewBoxSize=${48}\n          .strokeWidth=${4}\n        ></obc-circular-progress>\n\n        <div class=\"circular-content\">${this.renderCircularContent()}</div>\n      </div>\n    `;\n  }\n\n  private renderCircularContent() {\n    if (this.progressiveIndeterminate) {\n      return html`\n        <div class=\"circular-label-container\">\n          <span class=\"circular-value\">${Math.round(this.value)}</span>\n          ${this.showUnit\n            ? html`<span class=\"circular-unit\">%</span>`\n            : nothing}\n        </div>\n      `;\n    }\n\n    if (this.circularState === CircularProgressState.determinate) {\n      return html`\n        <div class=\"circular-label-container\">\n          <span class=\"circular-value\">${Math.round(this.value)}</span>\n          ${this.showUnit\n            ? html`<span class=\"circular-unit\">%</span>`\n            : nothing}\n        </div>\n      `;\n    } else if (this.circularState === CircularProgressState.indeterminate) {\n      return html`\n        <div class=\"circular-label-container\">\n          <span class=\"circular-value\">\n            <slot name=\"icon\">...</slot>\n          </span>\n        </div>\n      `;\n    } else {\n      return html`\n        <div class=\"circular-icon-container\">\n          <slot name=\"icon\">\n            <obi-placeholder></obi-placeholder>\n          </slot>\n        </div>\n      `;\n    }\n  }\n\n  private renderLinearProgress() {\n    const clampedValue = Math.max(0, Math.min(100, this.value));\n    const progressWidth = `${clampedValue}%`;\n    const barClasses = {\n      bar: true,\n      'priority-regular': this.priority === Priority.regular,\n    };\n\n    return html`\n      <div class=\"wrapper\">\n        ${this.showValue ? this.renderLabel() : ''}\n\n        <div class=${classMap(barClasses)}>\n          ${this.mode === ProgressBarMode.determinate\n            ? html`\n                <div\n                  class=\"loaded\"\n                  style=${styleMap({width: progressWidth})}\n                ></div>\n              `\n            : html` <div class=\"indeterminate-track\"></div> `}\n        </div>\n\n        ${this.hasDescription\n          ? html`\n              <div class=\"description-container\">\n                <span class=\"description-text\">${this.description}</span>\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n\n  private renderLabel() {\n    if (this.mode === ProgressBarMode.determinate) {\n      return html`\n        <div class=\"label-container\">\n          <div class=\"value-frame\">\n            <span class=\"value-number\">${Math.round(this.value)}</span>\n            <span class=\"value-unit\">%</span>\n          </div>\n          ${this.showState\n            ? html` <span class=\"state\">${this.stateLabel}</span> `\n            : nothing}\n        </div>\n      `;\n    } else {\n      return html`\n        <div class=\"label-container\">\n          <span class=\"loading-text\">Loading</span>\n        </div>\n      `;\n    }\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-progress-bar': ObcProgressBar;\n  }\n}\n"],"names":["ProgressBarType","ProgressBarMode","CircularProgressState"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents-full-bundle",
-  "version": "2.0.0-next.129",
+  "version": "2.0.0-next.131",
   "type": "module",
   "repository": {
     "type": "git",

package/src/building-blocks/readout-block/readout-block.ts

@@ -389,27 +389,38 @@ export class ObcReadoutBlock extends LitElement {
   /**
    * The advice marker for the current category / triggered state. Resting
    * categories carry a neutral outline glyph (tinted via `currentColor`);
-   * triggered alert categories swap to the filled IEC status icon, whose
-   * colours are fixed fills and ignore `currentColor` by design.
+   * triggered alert categories swap to the filled IEC status icon rendered
+   * with `useCssColor`, which selects the icon's token-coloured variant
+   * (alert fill + on-alert glyph, e.g. `--alert-caution-color` +
+   * `--on-caution-active-color`) — without it the same icon is a
+   * single-colour `currentColor` silhouette. This mirrors `obc-alert-icon`.
+   * The resting icons and the advice diamond deliberately stay on
+   * `currentColor`: their css-colour variants hard-code
+   * `--element-active-color`, which would defeat the neutral tint and the
+   * optimal / eco triggered tint applied from CSS.
    */
   private adviceFallbackIcon(): TemplateResult {
     const active = this.active;
     switch (this.category) {
       case ReadoutAdviceCategory.caution:
         return active
-          ? html`<obi-caution-color-iec></obi-caution-color-iec>`
+          ? html`<obi-caution-color-iec useCssColor></obi-caution-color-iec>`
           : html`<obi-caution-google></obi-caution-google>`;
       case ReadoutAdviceCategory.warning:
         return active
-          ? html`<obi-warning-unacknowledged-iec></obi-warning-unacknowledged-iec>`
+          ? html`<obi-warning-unacknowledged-iec
+              useCssColor
+            ></obi-warning-unacknowledged-iec>`
           : html`<obi-warning-unacknowledged-outlined></obi-warning-unacknowledged-outlined>`;
       case ReadoutAdviceCategory.alarm:
         return active
-          ? html`<obi-alarm-unacknowledged-iec></obi-alarm-unacknowledged-iec>`
+          ? html`<obi-alarm-unacknowledged-iec
+              useCssColor
+            ></obi-alarm-unacknowledged-iec>`
           : html`<obi-alarm></obi-alarm>`;
       case ReadoutAdviceCategory.running:
         return active
-          ? html`<obi-running-color-iec></obi-running-color-iec>`
+          ? html`<obi-running-color-iec useCssColor></obi-running-color-iec>`
           : html`<obi-running></obi-running>`;
       default:
         // regular / optimal / eco share the advice diamond; the triggered tint

package/src/components/modal-window/modal-window-sizing.stories.ts

@@ -0,0 +1,155 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {html} from 'lit';
+import './modal-window.js';
+import {ObcModalWindowSize} from './modal-window.js';
+import '../../icons/icon-placeholder.js';
+
+const meta = {
+  title: 'Application Components/Containers/Modal Window/Sizing',
+  component: 'obc-modal-window',
+  tags: ['autodocs', '6.0'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: `By default \`obc-modal-window\` is as tall as its content,
+capped at \`90vh\`. To size it externally, set the
+\`--obc-modal-window-height\` custom property on the element — a fixed value,
+or \`100%\` to follow a host element sized by its container. The \`90vh\` cap
+always applies and the content area scrolls when the content does not fit.
+
+Every frame below is 349 × 360 px, outlined.`,
+      },
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+const FRAME = 'width: 349px; height: 360px; outline: 1px dashed #d0021b;';
+const FILLED = 'position: relative; width: 100%; height: 100%;';
+
+const filledBody = html`
+  <div slot="content" style=${FILLED}>
+    <div
+      style="position: absolute; inset: 0; padding: 16px; background: rgba(0, 122, 255, 0.12);"
+    >
+      Body content, sized by the modal.
+    </div>
+  </div>
+`;
+
+const naturalBody = html`
+  <div
+    slot="content"
+    style="padding: 16px; background: rgba(0, 122, 255, 0.12);"
+  >
+    Body content at its natural height.
+  </div>
+`;
+
+const modal = (style: string, body = filledBody) => html`
+  <obc-modal-window
+    style=${style}
+    .size=${ObcModalWindowSize.Small}
+    .hasOptionalAction=${false}
+    .hasLeadingIcon=${true}
+  >
+    <obi-placeholder slot="leading-icon"></obi-placeholder>
+    <span slot="title">Modal Title</span>
+    ${body}
+    <span slot="cancel-label">Cancel</span>
+    <span slot="done-label">Done</span>
+  </obc-modal-window>
+`;
+
+const labelled = (label: string, content: unknown) => html`
+  <div style="display: flex; flex-direction: column; gap: 8px;">
+    <span style="font: 12px/1.4 sans-serif;">${label}</span>
+    ${content}
+  </div>
+`;
+
+const row = (...cells: unknown[]) => html`
+  <div style="display: flex; gap: 32px; align-items: flex-start;">${cells}</div>
+`;
+
+export const ContentHeightByDefault: Story = {
+  render: () =>
+    row(
+      labelled(
+        'Plain frame — content height',
+        html`<div style=${FRAME}>${modal('', naturalBody)}</div>`
+      ),
+      labelled(
+        'Flex frame — still content height',
+        html`<div style="${FRAME} display: flex;">
+          ${modal('', naturalBody)}
+        </div>`
+      )
+    ),
+  parameters: {
+    docs: {
+      description: {
+        story: `Without \`--obc-modal-window-height\` the modal keeps its
+content height, also when a flex container stretches the host element. Nothing
+an ancestor does can change the modal's height implicitly.`,
+      },
+    },
+  },
+};
+
+export const FixedHeight: Story = {
+  render: () =>
+    row(
+      labelled(
+        '--obc-modal-window-height: 360px',
+        html`<div style=${FRAME}>
+          ${modal('--obc-modal-window-height: 360px;')}
+        </div>`
+      ),
+      labelled(
+        'Default for comparison',
+        html`<div style=${FRAME}>${modal('')}</div>`
+      )
+    ),
+  parameters: {
+    docs: {
+      description: {
+        story: `A fixed \`--obc-modal-window-height\` sizes the modal exactly.
+The body takes whatever the title bar and the action row leave, with no fixed
+heights anywhere, and slotted content of \`height: 100%\` fills it. Values
+taller than the viewport are still capped at \`90vh\`.`,
+      },
+    },
+  },
+};
+
+export const FillContainer: Story = {
+  render: () =>
+    row(
+      labelled(
+        'Flex frame + --obc-modal-window-height: 100%',
+        html`<div style="${FRAME} display: flex;">
+          ${modal('--obc-modal-window-height: 100%;')}
+        </div>`
+      ),
+      labelled(
+        'Block frame + height: 100% on the element',
+        html`<div style=${FRAME}>
+          ${modal('height: 100%; --obc-modal-window-height: 100%;')}
+        </div>`
+      )
+    ),
+  parameters: {
+    docs: {
+      description: {
+        story: `\`--obc-modal-window-height: 100%\` makes the modal follow the
+host element's height: let a flex container stretch the host, or give the
+element an explicit \`height\`. Use this when the surrounding layout owns the
+modal's size.`,
+      },
+    },
+  },
+};

package/src/components/modal-window/modal-window.css

@@ -2,6 +2,10 @@
   box-sizing: border-box;
 }
 
+:host {
+  display: block;
+}
+
 .wrapper {
   box-sizing: border-box;
   background: var(--container-background-color);
@@ -13,6 +17,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+  height: var(--obc-modal-window-height, auto);
   max-height: 90vh;
 }
 

package/src/components/modal-window/modal-window.ts

@@ -54,6 +54,13 @@ export enum ObcModalWindowSize {
  * - `done-click`: Fired when the done button is clicked.
  * - `option-click`: Fired when the optional action button is clicked.
  *
+ * ### Sizing
+ * By default the modal is as tall as its content, capped at `90vh`. To give it
+ * an explicit height, set the `--obc-modal-window-height` custom property on
+ * the element — either a fixed value (`--obc-modal-window-height: 360px`) or
+ * `100%` to fill a host element that is sized by its container. The `90vh` cap
+ * always applies, and the content area scrolls when the content does not fit.
+ *
  * ### Example:
  * ```html
  * <obc-modal-window size="medium" hasLeadingIcon>
@@ -78,6 +85,7 @@ export enum ObcModalWindowSize {
  * @slot option-label - Slot for the label of the optional action button (shown when `hasOptionalAction` is true)
  * @slot cancel-label - Slot for the label of the cancel button (shown when `hasCancelAction` is true)
  * @slot done-label - Slot for the label of the done button
+ * @cssprop [--obc-modal-window-height=auto] - Height of the modal window. Defaults to content height (capped at 90vh); set a fixed value or `100%` to size the modal externally.
  * @stable
  */
 @customElement('obc-modal-window')

package/src/components/progress-bar/progress-bar.css

@@ -77,6 +77,10 @@
   transition: width 0.3s ease-in-out;
 }
 
+.bar.priority-regular .loaded {
+  background-color: var(--instrument-regular-secondary-color);
+}
+
 .indeterminate-track {
   position: absolute;
   top: 0;
@@ -88,6 +92,10 @@
   animation: indeterminate-slide 1.5s ease-in-out infinite;
 }
 
+.bar.priority-regular .indeterminate-track {
+  background-color: var(--instrument-regular-secondary-color);
+}
+
 @keyframes indeterminate-slide {
   0% {
     transform: translateX(-100%);

package/src/components/progress-bar/progress-bar.stories.ts

@@ -5,6 +5,7 @@ import {
   ProgressBarMode,
   ProgressBarType,
   CircularProgressState,
+  Priority,
 } from './progress-bar.js';
 import './progress-bar.js';
 
@@ -19,6 +20,7 @@ const meta: Meta<typeof ObcProgressBar> = {
   args: {
     type: ProgressBarType.linear,
     mode: ProgressBarMode.determinate,
+    priority: Priority.enhanced,
     circularState: CircularProgressState.determinate,
     value: 40,
     showValue: false,
@@ -48,6 +50,16 @@ const meta: Meta<typeof ObcProgressBar> = {
       },
       if: {arg: 'type', eq: ProgressBarType.linear},
     },
+    priority: {
+      control: {type: 'select'},
+      options: Object.values(Priority),
+      description:
+        'Color emphasis of the bar fill: enhanced (blue) or regular (gray)',
+      table: {
+        defaultValue: {summary: Priority.enhanced},
+      },
+      if: {arg: 'type', eq: ProgressBarType.linear},
+    },
     circularState: {
       control: {type: 'select'},
       options: Object.values(CircularProgressState),
@@ -172,6 +184,17 @@ export const LinearPrimary: Story = {
   },
 };
 
+export const LinearRegular: Story = {
+  name: 'Linear - Regular Priority',
+  args: {
+    type: ProgressBarType.linear,
+    mode: ProgressBarMode.determinate,
+    priority: Priority.regular,
+    value: 40,
+    showValue: true,
+  },
+};
+
 export const LinearIndeterminateSimple: Story = {
   name: 'Linear - Indeterminate Simple',
   args: {

package/src/components/progress-bar/progress-bar.ts

@@ -1,10 +1,14 @@
 import {LitElement, html, nothing, unsafeCSS} from 'lit';
 import {property} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
 import {styleMap} from 'lit/directives/style-map.js';
 import componentStyle from './progress-bar.css?inline';
 import {customElement} from '../../decorator.js';
 import '../../icons/icon-placeholder.js';
 import {CircularProgressMode} from '../../building-blocks/circular-progress/circular-progress.js';
+import {Priority} from '../../navigation-instruments/types.js';
+
+export {Priority};
 
 export enum ProgressBarType {
   linear = 'linear',
@@ -44,6 +48,10 @@ export enum CircularProgressState {
  * - **Indeterminate**: Animated, looping fill for work of unknown duration; the label shows
  *   "Loading".
  *
+ * **Color priority (`priority`)**
+ * - **Enhanced** (default): Blue fill, for a bar that reads as the primary value.
+ * - **Regular**: Neutral gray fill, for a bar that should recede as ancillary status.
+ *
  * **Circular states (`circularState`)**
  * - **Determinate**: Ring fills to `value`, with the rounded number (and optional `%` unit) centered.
  * - **Indeterminate**: Animated ring with the `icon` slot centered.
@@ -98,6 +106,11 @@ export class ObcProgressBar extends LitElement {
    */
   @property({type: String}) circularState: CircularProgressState =
     CircularProgressState.determinate;
+  /**
+   * Color emphasis of the bar fill: `regular` (gray) or `enhanced` (blue).
+   * @availableWhen type==linear
+   */
+  @property({type: String}) priority: Priority = Priority.enhanced;
   /** Progress percentage (0–100); clamped when rendered. */
   @property({type: Number}) value = 0;
   /**
@@ -222,12 +235,16 @@ export class ObcProgressBar extends LitElement {
   private renderLinearProgress() {
     const clampedValue = Math.max(0, Math.min(100, this.value));
     const progressWidth = `${clampedValue}%`;
+    const barClasses = {
+      bar: true,
+      'priority-regular': this.priority === Priority.regular,
+    };
 
     return html`
       <div class="wrapper">
         ${this.showValue ? this.renderLabel() : ''}
 
-        <div class="bar">
+        <div class=${classMap(barClasses)}>
           ${this.mode === ProgressBarMode.determinate
             ? html`
                 <div