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

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