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

package/custom-elements.json

@@ -41443,7 +41443,7 @@
                   "text": "TemplateResult"
                 }
               },
-              "description": "The advice marker for the current category / triggered state. Resting\ncategories carry a neutral outline glyph (tinted via `currentColor`);\ntriggered alert categories swap to the filled IEC status icon, whose\ncolours are fixed fills and ignore `currentColor` by design."
+              "description": "The advice marker for the current category / triggered state. Resting\ncategories carry a neutral outline glyph (tinted via `currentColor`);\ntriggered alert categories swap to the filled IEC status icon rendered\nwith `useCssColor`, which selects the icon's token-coloured variant\n(alert fill + on-alert glyph, e.g. `--alert-caution-color` +\n`--on-caution-active-color`) — without it the same icon is a\nsingle-colour `currentColor` silhouette. This mirrors `obc-alert-icon`.\nThe resting icons and the advice diamond deliberately stay on\n`currentColor`: their css-colour variants hard-code\n`--element-active-color`, which would defeat the neutral tint and the\noptimal / eco triggered tint applied from CSS."
             },
             {
               "kind": "method",
@@ -54878,8 +54878,15 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-modal-window>` – A modular dialog component for displaying content and capturing user actions.\n\nThe `obc-modal-window` provides a structured layout with a header (title and leading icon), a content area, and a footer with action buttons (Cancel, Done, and an optional custom action).\n\n### Features\n- **Flexible Sizing:** Supports `small`, `medium`, and `large` sizes to accommodate different content amounts.\n- **Header Customization:** Includes a title slot and an optional leading icon slot.\n- **Action Management:** Built-in \"Cancel\" and \"Done\" buttons, plus an optional additional action button.\n- **Responsive Actions:** Action buttons automatically switch between horizontal and vertical layouts based on the modal size.\n\n### Slots\n| Slot Name     | Renders When...             | Purpose                                            |\n|---------------|----------------------------|----------------------------------------------------|\n| leading-icon  | `hasLeadingIcon` is true    | Icon displayed before the title                   |\n| title         | Always                     | Main heading text for the modal                   |\n| content       | Always                     | Primary content area of the modal                  |\n| option-label  | `hasOptionalAction` is true | Label for the optional action button               |\n| cancel-label  | `hasCancelAction` is true   | Label for the cancel button                        |\n| done-label    | Always                     | Label for the primary (done) button                |\n\n### Properties\n- `size` (ObcModalWindowSize): Controls the width and layout of the modal. Default is `large`.\n- `hasOptionalAction` (boolean): Shows an additional action button when true.\n- `hasLeadingIcon` (boolean): Shows the leading icon slot when true.\n- `hasCancelAction` (boolean): Shows the footer cancel button when true. Default is `true`.\n- `hasCloseAction` (boolean): Shows the header close (X) button when true. Default is `true`.\n\n### Events\n- `close-click`: Fired when the close (X) button in the header is clicked.\n- `cancel-click`: Fired when the cancel button is clicked.\n- `done-click`: Fired when the done button is clicked.\n- `option-click`: Fired when the optional action button is clicked.\n\n### Example:\n```html\n<obc-modal-window size=\"medium\" hasLeadingIcon>\n  <span slot=\"leading-icon\"><obi-info></obi-info></span>\n  <span slot=\"title\">Settings</span>\n  <div slot=\"content\">\n    <p>Adjust your preferences here.</p>\n  </div>\n  <span slot=\"cancel-label\">Discard</span>\n  <span slot=\"done-label\">Save</span>\n</obc-modal-window>\n```",
+          "description": "`<obc-modal-window>` – A modular dialog component for displaying content and capturing user actions.\n\nThe `obc-modal-window` provides a structured layout with a header (title and leading icon), a content area, and a footer with action buttons (Cancel, Done, and an optional custom action).\n\n### Features\n- **Flexible Sizing:** Supports `small`, `medium`, and `large` sizes to accommodate different content amounts.\n- **Header Customization:** Includes a title slot and an optional leading icon slot.\n- **Action Management:** Built-in \"Cancel\" and \"Done\" buttons, plus an optional additional action button.\n- **Responsive Actions:** Action buttons automatically switch between horizontal and vertical layouts based on the modal size.\n\n### Slots\n| Slot Name     | Renders When...             | Purpose                                            |\n|---------------|----------------------------|----------------------------------------------------|\n| leading-icon  | `hasLeadingIcon` is true    | Icon displayed before the title                   |\n| title         | Always                     | Main heading text for the modal                   |\n| content       | Always                     | Primary content area of the modal                  |\n| option-label  | `hasOptionalAction` is true | Label for the optional action button               |\n| cancel-label  | `hasCancelAction` is true   | Label for the cancel button                        |\n| done-label    | Always                     | Label for the primary (done) button                |\n\n### Properties\n- `size` (ObcModalWindowSize): Controls the width and layout of the modal. Default is `large`.\n- `hasOptionalAction` (boolean): Shows an additional action button when true.\n- `hasLeadingIcon` (boolean): Shows the leading icon slot when true.\n- `hasCancelAction` (boolean): Shows the footer cancel button when true. Default is `true`.\n- `hasCloseAction` (boolean): Shows the header close (X) button when true. Default is `true`.\n\n### Events\n- `close-click`: Fired when the close (X) button in the header is clicked.\n- `cancel-click`: Fired when the cancel button is clicked.\n- `done-click`: Fired when the done button is clicked.\n- `option-click`: Fired when the optional action button is clicked.\n\n### Sizing\nBy default the modal is as tall as its content, capped at `90vh`. To give it\nan explicit height, set the `--obc-modal-window-height` custom property on\nthe element — either a fixed value (`--obc-modal-window-height: 360px`) or\n`100%` to fill a host element that is sized by its container. The `90vh` cap\nalways applies, and the content area scrolls when the content does not fit.\n\n### Example:\n```html\n<obc-modal-window size=\"medium\" hasLeadingIcon>\n  <span slot=\"leading-icon\"><obi-info></obi-info></span>\n  <span slot=\"title\">Settings</span>\n  <div slot=\"content\">\n    <p>Adjust your preferences here.</p>\n  </div>\n  <span slot=\"cancel-label\">Discard</span>\n  <span slot=\"done-label\">Save</span>\n</obc-modal-window>\n```",
           "name": "ObcModalWindow",
+          "cssProperties": [
+            {
+              "description": "Height of the modal window. Defaults to content height (capped at 90vh); set a fixed value or `100%` to size the modal externally.",
+              "name": "--obc-modal-window-height",
+              "default": "auto"
+            }
+          ],
           "slots": [
             {
               "description": "Slot for an icon to appear before the title (shown when `hasLeadingIcon` is true)",
@@ -58608,7 +58615,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-progress-bar>` – A status-only progress indicator (progress meter / spinner /\nloading indicator) for visualizing how far a task has advanced.\n\nDisplays the progress of an ongoing operation either as a horizontal bar or as a circular\nring. Unlike `<obc-progress-button>`, this is a passive, non-interactive display element:\nit 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\nUse 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.\nPick the **linear** type for inline, full-width contexts and the **circular** type for compact\nor centered placements. Because this component is display-only, pair it with a separate\ncontrol (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. |",
+          "description": "`<obc-progress-bar>` – A status-only progress indicator (progress meter / spinner /\nloading indicator) for visualizing how far a task has advanced.\n\nDisplays the progress of an ongoing operation either as a horizontal bar or as a circular\nring. Unlike `<obc-progress-button>`, this is a passive, non-interactive display element:\nit 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\nUse 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.\nPick the **linear** type for inline, full-width contexts and the **circular** type for compact\nor centered placements. Because this component is display-only, pair it with a separate\ncontrol (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. |",
           "name": "ObcProgressBar",
           "slots": [
             {
@@ -58644,6 +58651,15 @@
               "description": "Circular display state: `determinate` (numeric ring), `indeterminate` (animated ring with\nicon), or `icon` (ring framing the icon slot).",
               "attribute": "circularState"
             },
+            {
+              "kind": "field",
+              "name": "priority",
+              "type": {
+                "text": "Priority"
+              },
+              "description": "Color emphasis of the bar fill: `regular` (gray) or `enhanced` (blue).",
+              "attribute": "priority"
+            },
             {
               "kind": "field",
               "name": "value",
@@ -58780,6 +58796,14 @@
               "description": "Circular display state: `determinate` (numeric ring), `indeterminate` (animated ring with\nicon), or `icon` (ring framing the icon slot).",
               "fieldName": "circularState"
             },
+            {
+              "name": "priority",
+              "type": {
+                "text": "Priority"
+              },
+              "description": "Color emphasis of the bar fill: `regular` (gray) or `enhanced` (blue).",
+              "fieldName": "priority"
+            },
             {
               "name": "value",
               "type": {
@@ -58862,6 +58886,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "Priority",
+          "declaration": {
+            "name": "Priority",
+            "module": "src/components/progress-bar/progress-bar.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "ObcProgressBar",

package/dist/building-blocks/readout-block/readout-block.d.ts

@@ -230,8 +230,15 @@ export declare 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;
     /**

package/dist/building-blocks/readout-block/readout-block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"readout-block.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/readout-block/readout-block.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAgD,MAAM,KAAK,CAAC;AAK9E,OAAO,qCAAqC,CAAC;AAC7C,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,mBAAmB,EACpB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,iCAAiC,CAAC;AACzC,OAAO,yCAAyC,CAAC;AACjD,OAAO,gDAAgD,CAAC;AACxD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,qDAAqD,CAAC;AAC7D,OAAO,gDAAgD,CAAC;AACxD,OAAO,2BAA2B,CAAC;AACnC,OAAO,8CAA8C,CAAC;AACtD,OAAO,6BAA6B,CAAC;AACrC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,EAUL,gBAAgB,EAEjB,MAAM,4DAA4D,CAAC;AACpE,OAAO,EACL,KAAK,gBAAgB,EAEtB,MAAM,6CAA6C,CAAC;AAGrD,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAC,gBAAgB,EAAC,MAAM,4DAA4D,CAAC;AAE5F;;;;;;GAMG;AACH,oBAAY,mBAAmB;IAC7B,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,MAAM,WAAW;CAClB;AAED;;;;;GAKG;AACH,oBAAY,gBAAgB;IAC1B,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED;;;;GAIG;AACH,oBAAY,uBAAuB;IACjC,YAAY,kBAAkB;IAC9B,OAAO,YAAY;CACpB;AAED;;;;;;;;;;;;;;;GAeG;AACH,oBAAY,qBAAqB;IAC/B,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,GAAG,QAAQ;IACX,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;CACpB;AAED;;;GAGG;AACH,oBAAY,qBAAqB;IAC/B,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,oDAAoD;IAC1B,OAAO,EAAE,mBAAmB,CAC1B;IAE5B;;;OAGG;IACuB,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAQ;IAE/D;;;;OAIG;IACuB,SAAS,EAAE,gBAAgB,CAC3B;IAE1B,kDAAkD;IACxB,IAAI,EAAE,gBAAgB,CAA0B;IAE1E;;;;OAIG;IACuB,SAAS,CAAC,EAAE,cAAc,CAAC;IAErD,uCAAuC;IACZ,QAAQ,UAAS;IAE5C,6EAA6E;IACnD,MAAM,EAAE,oBAAoB,CACvB;IAE/B,yDAAyD;IAC9B,SAAS,UAAS;IAE7C,8EAA8E;IACnD,OAAO,UAAS;IAE3C;;;;;;;;OAQG;IACuB,cAAc,SAAK;IAE7C;;;;;;;;OAQG;IACuB,SAAS,SAAK;IAExC;;;OAGG;IACwB,WAAW,UAAS;IAE/C,sEAAsE;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;IAEjD,0EAA0E;IAC/C,GAAG,UAAS;IAEvC,qCAAqC;IACX,OAAO,SAAS;IAE1C,8DAA8D;IACpC,SAAS,EAAE,mBAAmB,CAC5B;IAE5B;;;;OAIG;IACuB,QAAQ,EAAE,qBAAqB,CACzB;IAEhC;;;;;;OAMG;IACwB,MAAM,UAAS;IAE1C,oDAAoD;IAC1B,WAAW,CAAC,EAAE,uBAAuB,CAAC;IAKhE,kEAAkE;IACxC,KAAK,EAAE,OAAO,GAAG,gBAAgB,CAAS;IAEpE,4EAA4E;IACjD,QAAQ,UAAS;IAE5C,0EAA0E;IAChD,SAAS,EAAE,qBAAqB,CAC7B;IAEpB,OAAO,CAAC,eAAe,CAAS;IAEzC,OAAO,KAAK,iBAAiB,GAY5B;IAED;;;;OAIG;IACH,OAAO,KAAK,iBAAiB,GAE5B;IAED;;;;;;;;OAQG;IACH,OAAO,KAAK,kBAAkB,GAK7B;IAED,OAAO,KAAK,oBAAoB,GAc/B;IAED,2EAA2E;IAC3E,OAAO,KAAK,YAAY,GASvB;IAED;;;;;OAKG;IACH,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,gBAAgB,CAMtB;IAEF,OAAO,CAAC,UAAU;IAsBlB;;;;;OAKG;IACH,OAAO,CAAC,kBAAkB;IA4B1B;;;OAGG;IACH,OAAO,CAAC,iBAAiB;cAiBN,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAazD,MAAM;IA8Ff,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
+{"version":3,"file":"readout-block.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/readout-block/readout-block.ts"],"names":[],"mappings":"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"}

package/dist/building-blocks/readout-block/readout-block.js

@@ -183,20 +183,31 @@ let ObcReadoutBlock = class 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.
    */
   adviceFallbackIcon() {
     const active = this.active;
     switch (this.category) {
       case "caution":
-        return active ? html`<obi-caution-color-iec></obi-caution-color-iec>` : html`<obi-caution-google></obi-caution-google>`;
+        return active ? html`<obi-caution-color-iec useCssColor></obi-caution-color-iec>` : html`<obi-caution-google></obi-caution-google>`;
       case "warning":
-        return active ? html`<obi-warning-unacknowledged-iec></obi-warning-unacknowledged-iec>` : html`<obi-warning-unacknowledged-outlined></obi-warning-unacknowledged-outlined>`;
+        return active ? html`<obi-warning-unacknowledged-iec
+              useCssColor
+            ></obi-warning-unacknowledged-iec>` : html`<obi-warning-unacknowledged-outlined></obi-warning-unacknowledged-outlined>`;
       case "alarm":
-        return active ? html`<obi-alarm-unacknowledged-iec></obi-alarm-unacknowledged-iec>` : html`<obi-alarm></obi-alarm>`;
+        return active ? html`<obi-alarm-unacknowledged-iec
+              useCssColor
+            ></obi-alarm-unacknowledged-iec>` : html`<obi-alarm></obi-alarm>`;
       case "running":
-        return active ? html`<obi-running-color-iec></obi-running-color-iec>` : html`<obi-running></obi-running>`;
+        return active ? html`<obi-running-color-iec useCssColor></obi-running-color-iec>` : html`<obi-running></obi-running>`;
       default:
         return active ? html`<obi-notification-advice-active></obi-notification-advice-active>` : html`<obi-notification-advice></obi-notification-advice>`;
     }

package/dist/building-blocks/readout-block/readout-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"readout-block.js","sources":["../../../src/building-blocks/readout-block/readout-block.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS, type TemplateResult} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport componentStyle from './readout-block.css?inline';\nimport {customElement} from '../../decorator.js';\nimport '../../components/textbox/textbox.js';\nimport {\n  ObcTextboxSize,\n  ObcTextboxFontWeight,\n  ObcTextboxAlignment,\n} from '../../components/textbox/textbox.js';\nimport '../../icons/icon-input-right.js';\nimport '../../icons/icon-notification-advice.js';\nimport '../../icons/icon-notification-advice-active.js';\nimport '../../icons/icon-caution-google.js';\nimport '../../icons/icon-caution-color-iec.js';\nimport '../../icons/icon-warning-unacknowledged-outlined.js';\nimport '../../icons/icon-warning-unacknowledged-iec.js';\nimport '../../icons/icon-alarm.js';\nimport '../../icons/icon-alarm-unacknowledged-iec.js';\nimport '../../icons/icon-running.js';\nimport '../../icons/icon-running-color-iec.js';\nimport {\n  formatNumericValue,\n  readoutFormattedInteger,\n  assertReadoutValueType,\n  assertReadoutFractionDigits,\n  isReadoutDigitCountMissing,\n  resolveReadoutDigitCount,\n  resolveReadoutNumericValue,\n  resolveReadoutTextValue,\n  READOUT_UNAVAILABLE_DASH,\n  ReadoutValueType,\n  type ReadoutNumericFormatOptions,\n} from '../../navigation-instruments/readout/readout-formatters.js';\nimport {\n  type AlertFrameConfig,\n  wrapWithAlertFrame,\n} from '../../components/alert-frame/alert-frame.js';\n\n// Re-exported so consumers can configure typography without a second import path.\nexport {\n  ObcTextboxSize,\n  ObcTextboxFontWeight,\n  ObcTextboxAlignment,\n} from '../../components/textbox/textbox.js';\nexport {ReadoutValueType} from '../../navigation-instruments/readout/readout-formatters.js';\n\n/**\n * Semantic variant of the block. Drives the default marker icon and the\n * colour token; the layout is identical across variants.\n * - `value`: the primary reading (no default marker icon).\n * - `setpoint`: a setpoint reference (default `input-right` marker).\n * - `advice`: an advisory reference (default `notification-advice` marker).\n */\nexport enum ReadoutBlockVariant {\n  value = 'value',\n  setpoint = 'setpoint',\n  advice = 'advice',\n}\n\n/**\n * Density tier of the block — drives icon size, the icon↔number gap, and the\n * degree-column width tier. The number typography size is controlled\n * independently via {@link ObcReadoutBlock.valueSize} so a parent can de-emphasise\n * one block relative to another within the same tier.\n */\nexport enum ReadoutBlockSize {\n  small = 'small',\n  medium = 'medium',\n  large = 'large',\n}\n\n/**\n * Per-block measurement quality, rendered as a non-shifting outline chip.\n * - `low-integrity`: the value is suspect.\n * - `invalid`: the value is invalid.\n */\nexport enum ReadoutBlockDataQuality {\n  lowIntegrity = 'low-integrity',\n  invalid = 'invalid',\n}\n\n/**\n * Semantic category of an advice block (Figma 6.1 \"Readout-block-advice\"\n * Value axis). Drives the default marker icon and — while {@link\n * ObcReadoutBlock.active} — the triggered styling:\n * - `regular` / `optimal` / `eco`: the advice diamond; triggered renders the\n *   filled diamond (tinted enhanced-blue / mint for optimal / eco) and a\n *   SemiBold number.\n * - `caution` / `warning` / `alarm` / `running`: the matching neutral outline\n *   icon; triggered swaps in the filled IEC status icon and the active text\n *   colour.\n *\n * TODO(designer): the optimal / eco triggered tint covers the whole diamond\n * glyph — the Figma icon tints only the inner plus, which needs a two-tone\n * icon asset; and the advice \"Enhanced\" state (indent background chip) is not\n * implemented yet. Both flagged as \"may change\" in the 6.1 review.\n */\nexport enum ReadoutAdviceCategory {\n  regular = 'regular',\n  optimal = 'optimal',\n  eco = 'eco',\n  caution = 'caution',\n  warning = 'warning',\n  alarm = 'alarm',\n  running = 'running',\n}\n\n/**\n * Pop-up fade phase for a setpoint block. Driven by the parent's setpoint\n * interaction state machine; only meaningful for `role=\"setpoint\"`.\n */\nexport enum ReadoutBlockHidePhase {\n  none = 'none',\n  hiding = 'hiding',\n  hidden = 'hidden',\n}\n\n/**\n * `<obc-readout-block>` – the most atomic readout primitive: a single\n * cap-height-aligned, width-reservable numeric segment (value / setpoint /\n * advice).\n *\n * It renders one `obc-textbox` number with optional hinted leading zeros, a\n * reservable width, an optional leading marker icon (via the `icon` slot or the\n * role default), an optional trailing degree glyph, an `off`/unavailable text\n * state, per-block data-quality and an optional per-block alert frame.\n *\n * Setting `valueType` to `text` renders `value` verbatim (e.g.\n * `\"Auto\"`) instead of a formatted number.\n *\n * This is a building block used inside `obc-readout-list-item` (and, in a future\n * refactor, inside `obc-readout`); it is not normally used on its own. Colour is\n * inherited from the host context (the parent sets the role colour), so the\n * block stays neutral until placed.\n *\n * @experimental Pilot for the new primitives + per-block options Readout API; the\n * API may change in a future release.\n *\n * @slot icon - Replaces the role's default marker icon.\n *\n * @csspart block - The block container (carries role / tone / data-quality).\n * @csspart block-content - The number + degree group.\n * @csspart block-text - The `obc-textbox` rendering the number.\n * @csspart block-icon - The leading marker-icon container.\n * @csspart degree - The trailing degree-glyph column.\n */\n@customElement('obc-readout-block')\nexport class ObcReadoutBlock extends LitElement {\n  /** Semantic variant (value / setpoint / advice). */\n  @property({type: String}) variant: ReadoutBlockVariant =\n    ReadoutBlockVariant.value;\n\n  /**\n   * The value; `null`/`undefined` renders a dash. A number by default, or text\n   * when {@link valueType} is `text`.\n   */\n  @property({type: String}) value: number | string | null = null;\n\n  /**\n   * How {@link value} is interpreted. `number` (default) formats it via\n   * `fractionDigits`; `text` renders it verbatim and ignores the numeric\n   * format options. Passing text while this is `number` throws.\n   */\n  @property({type: String}) valueType: ReadoutValueType =\n    ReadoutValueType.number;\n\n  /** Density tier — icon size, gap, degree tier. */\n  @property({type: String}) size: ReadoutBlockSize = ReadoutBlockSize.small;\n\n  /**\n   * Resolved number-typography size. When unset it is derived from `size`\n   * (small→s, medium→m, large→l), so a parent that de-emphasises a block (e.g.\n   * a secondary setpoint) can pass a smaller size without changing the tier.\n   */\n  @property({type: String}) valueSize?: ObcTextboxSize;\n\n  /** Accent (in-command) colour tone. */\n  @property({type: Boolean}) enhanced = false;\n\n  /** Number font weight (regular / semibold / bold); colour is independent. */\n  @property({type: String}) weight: ObcTextboxFontWeight =\n    ObcTextboxFontWeight.regular;\n\n  /** Render the trailing cap-height degree glyph (`°`). */\n  @property({type: Boolean}) hasDegree = false;\n\n  /** Show the leading marker-icon container (always on for setpoint/advice). */\n  @property({type: Boolean}) hasIcon = false;\n\n  /**\n   * Number of fraction digits. Must be between 0 and 100 — the range\n   * `Number.prototype.toFixed` accepts; outside it throws a `RangeError`.\n   * A fractional count truncates (`2.7` → `2`). A count that never arrived\n   * (`NaN`, `null` or unset) renders the reading as the unavailable dash —\n   * formatting with a precision the author never chose would let a critical\n   * `0.4` pass for a healthy `0`.\n   * @availableWhen valueType==number\n   */\n  @property({type: Number}) fractionDigits = 0;\n\n  /**\n   * Integer digits to reserve / hint (independent of `fractionDigits`).\n   * Bounded before use: a fractional count\n   * truncates (`2.7` → `2`), anything above 100 — including `Infinity` —\n   * caps at 100, and a negative count reserves nothing. A count that never\n   * arrived (`NaN`, `null` or unset) renders the reading as the unavailable\n   * dash, consistent with `fractionDigits`.\n   * @availableWhen valueType==number\n   */\n  @property({type: Number}) maxDigits = 0;\n\n  /**\n   * Render muted leading zeros filling the integer part to `maxDigits`.\n   * @availableWhen valueType==number\n   */\n  @property({type: Boolean}) hintedZeros = false;\n\n  /** Explicit longest string to reserve width for (e.g. `\"0000.0\"`). */\n  @property({type: String}) spaceReserver?: string;\n\n  /** Render `offText` instead of a number (e.g. equipment powered down). */\n  @property({type: Boolean}) off = false;\n\n  /** Text shown when `off` is true. */\n  @property({type: String}) offText = 'OFF';\n\n  /** Text alignment of the number within its reserved width. */\n  @property({type: String}) alignment: ObcTextboxAlignment =\n    ObcTextboxAlignment.Right;\n\n  /**\n   * Semantic category of an advice block — picks the default marker icon and\n   * the {@link active} styling. Only meaningful for `variant=\"advice\"`.\n   * @availableWhen variant==advice\n   */\n  @property({type: String}) category: ReadoutAdviceCategory =\n    ReadoutAdviceCategory.regular;\n\n  /**\n   * The advice is triggered: the marker swaps to its filled/status icon and\n   * the number takes the category's triggered styling (SemiBold for\n   * regular/optimal/eco, active text colour for the alert categories). Only\n   * meaningful for `variant=\"advice\"`.\n   * @availableWhen variant==advice\n   */\n  @property({type: Boolean}) active = false;\n\n  /** Per-block measurement quality (outline chip). */\n  @property({type: String}) dataQuality?: ReadoutBlockDataQuality;\n\n  // `boolean | …` (not `false | …`): the generated Angular wrapper widens a\n  // literal-`false` union to `boolean`. `wrapWithAlertFrame` treats any\n  // non-object as \"no frame\", so accepting `boolean` is harmless.\n  /** Per-block alert frame; nests inside any parent alert frame. */\n  @property({type: Object}) alert: boolean | AlertFrameConfig = false;\n\n  /** Setpoint focus (touch) state — only meaningful for `role=\"setpoint\"`. */\n  @property({type: Boolean}) touching = false;\n\n  /** Setpoint pop-up fade phase — only meaningful for `role=\"setpoint\"`. */\n  @property({type: String}) hidePhase: ReadoutBlockHidePhase =\n    ReadoutBlockHidePhase.none;\n\n  @state() private hasAssignedIcon = false;\n\n  private get resolvedValueSize(): ObcTextboxSize {\n    if (this.valueSize) {\n      return this.valueSize;\n    }\n    switch (this.size) {\n      case ReadoutBlockSize.large:\n        return ObcTextboxSize.l;\n      case ReadoutBlockSize.medium:\n        return ObcTextboxSize.m;\n      default:\n        return ObcTextboxSize.s;\n    }\n  }\n\n  /**\n   * `maxDigits` bounded to a usable count. Every width calculation below goes\n   * through this rather than the raw property, so an `Infinity` (or absurdly\n   * large) value cannot reach `String.prototype.repeat`.\n   */\n  private get resolvedMaxDigits(): number {\n    return resolveReadoutDigitCount(this.maxDigits);\n  }\n\n  /**\n   * Whether a digit knob failed to arrive (`NaN` / `null` / `undefined`).\n   * The reading then renders as the unavailable dash rather than silently\n   * formatting with a default the author never chose — a critical `0.4`\n   * formatted with a failed `fractionDigits` would otherwise print as a\n   * plausible-looking `0`. A missing `maxDigits` dashes too, for consistency:\n   * either knob arriving broken means the row's configuration cannot be\n   * trusted.\n   */\n  private get digitCountsMissing(): boolean {\n    return (\n      isReadoutDigitCountMissing(this.fractionDigits) ||\n      isReadoutDigitCountMissing(this.maxDigits)\n    );\n  }\n\n  private get numericFormatOptions(): ReadoutNumericFormatOptions {\n    return {\n      // The unavailable placeholder stays short (`\\u2012.\\u2012\\u2012`) rather than\n      // spelling out every reserved digit position — `maxDigits` already\n      // reserves the width, so it simply sits at the right edge of it.\n      showZeroPadding: false,\n      minValueLength: this.resolvedMaxDigits,\n      // A missing precision shapes the placeholder as zero fraction digits (a\n      // single dash) — and keeps a runtime `undefined`/`null` out of the\n      // options object, which is typed `number` throughout the formatters.\n      fractionDigits: isReadoutDigitCountMissing(this.fractionDigits)\n        ? 0\n        : this.fractionDigits,\n    };\n  }\n\n  /** Widest possible value string for width reservation (e.g. `\"000.0\"`). */\n  private get reserverText(): string {\n    const maxDigits = this.resolvedMaxDigits;\n    if (maxDigits <= 0) {\n      return '';\n    }\n    const integer = '0'.repeat(maxDigits);\n    return this.fractionDigits > 0\n      ? `${integer}.${'0'.repeat(this.fractionDigits)}`\n      : integer;\n  }\n\n  /**\n   * Effective width reserver: the wider of the explicit `spaceReserver` and the\n   * `maxDigits`/`fractionDigits`-derived reserve, so an explicit reserver can\n   * never reserve *less* than the formatted value needs. Under tabular-nums the\n   * rendered width is proportional to character count, so \"wider\" compares length.\n   */\n  private widerReserver(explicit: string | undefined, derived: string): string {\n    if (!explicit) {\n      return derived;\n    }\n    if (!derived) {\n      return explicit;\n    }\n    return explicit.length >= derived.length ? explicit : derived;\n  }\n\n  private dataQualityClasses(): Record<string, boolean> {\n    return {\n      'data-low-integrity':\n        this.dataQuality === ReadoutBlockDataQuality.lowIntegrity,\n      'data-invalid': this.dataQuality === ReadoutBlockDataQuality.invalid,\n    };\n  }\n\n  private onIconSlotChange = (event: Event): void => {\n    // `slotchange` fires after the first render once content is (re)assigned,\n    // so it covers the initial state without a firstUpdated re-render.\n    this.hasAssignedIcon =\n      (event.target as HTMLSlotElement).assignedElements({flatten: true})\n        .length > 0;\n  };\n\n  private renderIcon(): TemplateResult | typeof nothing {\n    // Value blocks only show an icon when asked; setpoint/advice always reserve\n    // their marker. The role default is rendered as a direct child (so it sizes\n    // via `.block-icon obi-*`) and hidden once an icon is assigned to the slot —\n    // `{flatten: true}` sees through a forwarded-but-empty parent slot, so the\n    // default still shows when the consumer overrides nothing.\n    const showIcon = this.variant !== ReadoutBlockVariant.value || this.hasIcon;\n    if (!showIcon) {\n      return nothing;\n    }\n    let fallback: TemplateResult | typeof nothing = nothing;\n    if (this.variant === ReadoutBlockVariant.setpoint) {\n      fallback = html`<obi-input-right></obi-input-right>`;\n    } else if (this.variant === ReadoutBlockVariant.advice) {\n      fallback = this.adviceFallbackIcon();\n    }\n    return html`<span class=\"block-icon\" part=\"block-icon\" aria-hidden=\"true\">\n      <slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot>\n      ${this.hasAssignedIcon ? nothing : fallback}\n    </span>`;\n  }\n\n  /**\n   * The advice marker for the current category / triggered state. Resting\n   * categories carry a neutral outline glyph (tinted via `currentColor`);\n   * triggered alert categories swap to the filled IEC status icon, whose\n   * colours are fixed fills and ignore `currentColor` by design.\n   */\n  private adviceFallbackIcon(): TemplateResult {\n    const active = this.active;\n    switch (this.category) {\n      case ReadoutAdviceCategory.caution:\n        return active\n          ? html`<obi-caution-color-iec></obi-caution-color-iec>`\n          : html`<obi-caution-google></obi-caution-google>`;\n      case ReadoutAdviceCategory.warning:\n        return active\n          ? html`<obi-warning-unacknowledged-iec></obi-warning-unacknowledged-iec>`\n          : html`<obi-warning-unacknowledged-outlined></obi-warning-unacknowledged-outlined>`;\n      case ReadoutAdviceCategory.alarm:\n        return active\n          ? html`<obi-alarm-unacknowledged-iec></obi-alarm-unacknowledged-iec>`\n          : html`<obi-alarm></obi-alarm>`;\n      case ReadoutAdviceCategory.running:\n        return active\n          ? html`<obi-running-color-iec></obi-running-color-iec>`\n          : html`<obi-running></obi-running>`;\n      default:\n        // regular / optimal / eco share the advice diamond; the triggered tint\n        // is applied via CSS on `.block-icon` (see `advice-*` classes).\n        return active\n          ? html`<obi-notification-advice-active></obi-notification-advice-active>`\n          : html`<obi-notification-advice></obi-notification-advice>`;\n    }\n  }\n\n  /**\n   * A cap-height `°` column whose width scales with the number size. Inherits the\n   * block's colour.\n   */\n  private renderDegreeGlyph(size: ObcTextboxSize): TemplateResult {\n    return html`\n      <span\n        class=${classMap({\n          'degree-column': true,\n          [`degree-${size}`]: true,\n          'degree-inherit': true,\n        })}\n        part=\"degree\"\n      >\n        <obc-textbox class=\"degree-glyph\" .size=${size} alignment=\"center\"\n          >°</obc-textbox\n        >\n      </span>\n    `;\n  }\n\n  protected override willUpdate(changed: Map<string, unknown>): void {\n    super.willUpdate(changed);\n    // Validated on EVERY update, deliberately NOT gated on `value`/`valueType`\n    // appearing in `changed`. When this assertion throws, Lit's `performUpdate`\n    // catch calls `__markUpdated()`, which clears the changed-properties map. A\n    // later update driven by any OTHER property — inside `obc-readout-list`,\n    // `align()` writing the shared reservers — would then see no `value` in\n    // `changed`, skip the check, and render the invalid value as a plain dash:\n    // exactly the silent failure this assertion exists to prevent.\n    assertReadoutValueType('obc-readout-block', this.value, this.valueType);\n    assertReadoutFractionDigits('obc-readout-block', this.fractionDigits);\n  }\n\n  override render() {\n    const valueSize = this.resolvedValueSize;\n    const isAdvice = this.variant === ReadoutBlockVariant.advice;\n    // Triggered regular/optimal/eco advice renders SemiBold (Figma 6.1); the\n    // alert categories keep the caller's weight and change colour instead.\n    const adviceSemibold =\n      isAdvice &&\n      this.active &&\n      (this.category === ReadoutAdviceCategory.regular ||\n        this.category === ReadoutAdviceCategory.optimal ||\n        this.category === ReadoutAdviceCategory.eco);\n    const weight = adviceSemibold ? ObcTextboxFontWeight.semibold : this.weight;\n    const formatOptions = this.numericFormatOptions;\n    const isTextMode = this.valueType === ReadoutValueType.text;\n    // A missing digit knob makes the reading untrustworthy, so it resolves to\n    // \"no reading\" and renders the dash (see `digitCountsMissing`). Text mode\n    // is unaffected — it ignores the numeric knobs entirely.\n    const valueForFormat = this.digitCountsMissing\n      ? undefined\n      : resolveReadoutNumericValue(this.value, this.valueType);\n    const textValue = resolveReadoutTextValue(this.value, this.valueType);\n    // Text mode renders verbatim and ignores the numeric format options; a\n    // blank / missing text value still falls back to the unavailable dash.\n    const text = this.off\n      ? this.offText\n      : isTextMode\n        ? (textValue ?? READOUT_UNAVAILABLE_DASH)\n        : formatNumericValue(valueForFormat, formatOptions);\n    // Hinted zeros pad the INTEGER part up to `maxDigits`, independent of\n    // `fractionDigits` (the decimal point and fraction digits never count toward\n    // `maxDigits`). Negative / dashed values are not padded. Example: value 1.2,\n    // maxDigits 3, fractionDigits 1 → \"001.2\".\n    const hintCount =\n      this.off ||\n      isTextMode ||\n      !this.hintedZeros ||\n      valueForFormat === undefined ||\n      valueForFormat < 0\n        ? 0\n        : Math.max(this.resolvedMaxDigits - readoutFormattedInteger(text), 0);\n    const hinted = hintCount > 0 ? '0'.repeat(hintCount) : '';\n    // Hinted zeros own the width — they already fill to `maxDigits` — so when\n    // `hintedZeros` is enabled an explicit `spaceReserver` is ignored (it has\n    // higher priority). Otherwise the wider of the explicit reserver and the\n    // `maxDigits`-derived reserve wins.\n    // Text mode ignores the `maxDigits`-derived numeric reserve — only an\n    // explicit `spaceReserver` still applies.\n    const reserver = isTextMode\n      ? (this.spaceReserver ?? '')\n      : this.hintedZeros\n        ? this.reserverText\n        : this.widerReserver(this.spaceReserver, this.reserverText);\n\n    const block = html`\n      <div\n        class=${classMap({\n          block: true,\n          [`block-${this.variant}`]: true,\n          [`size-${this.size}`]: true,\n          [`value-size-${valueSize}`]: true,\n          [`advice-${this.category}`]: isAdvice,\n          'advice-active': isAdvice && this.active,\n          'tone-enhanced': this.enhanced,\n          touching: this.touching,\n          'is-hiding': this.hidePhase === ReadoutBlockHidePhase.hiding,\n          'is-hidden': this.hidePhase === ReadoutBlockHidePhase.hidden,\n          ...this.dataQualityClasses(),\n        })}\n        part=\"block block-${this.variant}\"\n      >\n        ${this.renderIcon()}\n        <span class=\"block-content\" part=\"block-content\">\n          <obc-textbox\n            class=\"block-text\"\n            part=\"block-text\"\n            .size=${valueSize}\n            .fontWeight=${weight}\n            .alignment=${this.alignment}\n            .tabularNums=${true}\n          >\n            ${hinted\n              ? html`<span class=\"hinted-zero\" aria-hidden=\"true\"\n                  >${hinted}</span\n                >`\n              : nothing}${text}\n            ${reserver ? html`<span slot=\"length\">${reserver}</span>` : nothing}\n          </obc-textbox>\n          ${this.hasDegree ? this.renderDegreeGlyph(valueSize) : nothing}\n        </span>\n      </div>\n    `;\n    return wrapWithAlertFrame(this.alert ?? false, block);\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-readout-block': ObcReadoutBlock;\n  }\n}\n"],"names":["ReadoutBlockVariant","ReadoutBlockSize","ReadoutBlockDataQuality","ReadoutAdviceCategory","ReadoutBlockHidePhase"],"mappings":"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"}
+{"version":3,"file":"readout-block.js","sources":["../../../src/building-blocks/readout-block/readout-block.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS, type TemplateResult} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport componentStyle from './readout-block.css?inline';\nimport {customElement} from '../../decorator.js';\nimport '../../components/textbox/textbox.js';\nimport {\n  ObcTextboxSize,\n  ObcTextboxFontWeight,\n  ObcTextboxAlignment,\n} from '../../components/textbox/textbox.js';\nimport '../../icons/icon-input-right.js';\nimport '../../icons/icon-notification-advice.js';\nimport '../../icons/icon-notification-advice-active.js';\nimport '../../icons/icon-caution-google.js';\nimport '../../icons/icon-caution-color-iec.js';\nimport '../../icons/icon-warning-unacknowledged-outlined.js';\nimport '../../icons/icon-warning-unacknowledged-iec.js';\nimport '../../icons/icon-alarm.js';\nimport '../../icons/icon-alarm-unacknowledged-iec.js';\nimport '../../icons/icon-running.js';\nimport '../../icons/icon-running-color-iec.js';\nimport {\n  formatNumericValue,\n  readoutFormattedInteger,\n  assertReadoutValueType,\n  assertReadoutFractionDigits,\n  isReadoutDigitCountMissing,\n  resolveReadoutDigitCount,\n  resolveReadoutNumericValue,\n  resolveReadoutTextValue,\n  READOUT_UNAVAILABLE_DASH,\n  ReadoutValueType,\n  type ReadoutNumericFormatOptions,\n} from '../../navigation-instruments/readout/readout-formatters.js';\nimport {\n  type AlertFrameConfig,\n  wrapWithAlertFrame,\n} from '../../components/alert-frame/alert-frame.js';\n\n// Re-exported so consumers can configure typography without a second import path.\nexport {\n  ObcTextboxSize,\n  ObcTextboxFontWeight,\n  ObcTextboxAlignment,\n} from '../../components/textbox/textbox.js';\nexport {ReadoutValueType} from '../../navigation-instruments/readout/readout-formatters.js';\n\n/**\n * Semantic variant of the block. Drives the default marker icon and the\n * colour token; the layout is identical across variants.\n * - `value`: the primary reading (no default marker icon).\n * - `setpoint`: a setpoint reference (default `input-right` marker).\n * - `advice`: an advisory reference (default `notification-advice` marker).\n */\nexport enum ReadoutBlockVariant {\n  value = 'value',\n  setpoint = 'setpoint',\n  advice = 'advice',\n}\n\n/**\n * Density tier of the block — drives icon size, the icon↔number gap, and the\n * degree-column width tier. The number typography size is controlled\n * independently via {@link ObcReadoutBlock.valueSize} so a parent can de-emphasise\n * one block relative to another within the same tier.\n */\nexport enum ReadoutBlockSize {\n  small = 'small',\n  medium = 'medium',\n  large = 'large',\n}\n\n/**\n * Per-block measurement quality, rendered as a non-shifting outline chip.\n * - `low-integrity`: the value is suspect.\n * - `invalid`: the value is invalid.\n */\nexport enum ReadoutBlockDataQuality {\n  lowIntegrity = 'low-integrity',\n  invalid = 'invalid',\n}\n\n/**\n * Semantic category of an advice block (Figma 6.1 \"Readout-block-advice\"\n * Value axis). Drives the default marker icon and — while {@link\n * ObcReadoutBlock.active} — the triggered styling:\n * - `regular` / `optimal` / `eco`: the advice diamond; triggered renders the\n *   filled diamond (tinted enhanced-blue / mint for optimal / eco) and a\n *   SemiBold number.\n * - `caution` / `warning` / `alarm` / `running`: the matching neutral outline\n *   icon; triggered swaps in the filled IEC status icon and the active text\n *   colour.\n *\n * TODO(designer): the optimal / eco triggered tint covers the whole diamond\n * glyph — the Figma icon tints only the inner plus, which needs a two-tone\n * icon asset; and the advice \"Enhanced\" state (indent background chip) is not\n * implemented yet. Both flagged as \"may change\" in the 6.1 review.\n */\nexport enum ReadoutAdviceCategory {\n  regular = 'regular',\n  optimal = 'optimal',\n  eco = 'eco',\n  caution = 'caution',\n  warning = 'warning',\n  alarm = 'alarm',\n  running = 'running',\n}\n\n/**\n * Pop-up fade phase for a setpoint block. Driven by the parent's setpoint\n * interaction state machine; only meaningful for `role=\"setpoint\"`.\n */\nexport enum ReadoutBlockHidePhase {\n  none = 'none',\n  hiding = 'hiding',\n  hidden = 'hidden',\n}\n\n/**\n * `<obc-readout-block>` – the most atomic readout primitive: a single\n * cap-height-aligned, width-reservable numeric segment (value / setpoint /\n * advice).\n *\n * It renders one `obc-textbox` number with optional hinted leading zeros, a\n * reservable width, an optional leading marker icon (via the `icon` slot or the\n * role default), an optional trailing degree glyph, an `off`/unavailable text\n * state, per-block data-quality and an optional per-block alert frame.\n *\n * Setting `valueType` to `text` renders `value` verbatim (e.g.\n * `\"Auto\"`) instead of a formatted number.\n *\n * This is a building block used inside `obc-readout-list-item` (and, in a future\n * refactor, inside `obc-readout`); it is not normally used on its own. Colour is\n * inherited from the host context (the parent sets the role colour), so the\n * block stays neutral until placed.\n *\n * @experimental Pilot for the new primitives + per-block options Readout API; the\n * API may change in a future release.\n *\n * @slot icon - Replaces the role's default marker icon.\n *\n * @csspart block - The block container (carries role / tone / data-quality).\n * @csspart block-content - The number + degree group.\n * @csspart block-text - The `obc-textbox` rendering the number.\n * @csspart block-icon - The leading marker-icon container.\n * @csspart degree - The trailing degree-glyph column.\n */\n@customElement('obc-readout-block')\nexport class ObcReadoutBlock extends LitElement {\n  /** Semantic variant (value / setpoint / advice). */\n  @property({type: String}) variant: ReadoutBlockVariant =\n    ReadoutBlockVariant.value;\n\n  /**\n   * The value; `null`/`undefined` renders a dash. A number by default, or text\n   * when {@link valueType} is `text`.\n   */\n  @property({type: String}) value: number | string | null = null;\n\n  /**\n   * How {@link value} is interpreted. `number` (default) formats it via\n   * `fractionDigits`; `text` renders it verbatim and ignores the numeric\n   * format options. Passing text while this is `number` throws.\n   */\n  @property({type: String}) valueType: ReadoutValueType =\n    ReadoutValueType.number;\n\n  /** Density tier — icon size, gap, degree tier. */\n  @property({type: String}) size: ReadoutBlockSize = ReadoutBlockSize.small;\n\n  /**\n   * Resolved number-typography size. When unset it is derived from `size`\n   * (small→s, medium→m, large→l), so a parent that de-emphasises a block (e.g.\n   * a secondary setpoint) can pass a smaller size without changing the tier.\n   */\n  @property({type: String}) valueSize?: ObcTextboxSize;\n\n  /** Accent (in-command) colour tone. */\n  @property({type: Boolean}) enhanced = false;\n\n  /** Number font weight (regular / semibold / bold); colour is independent. */\n  @property({type: String}) weight: ObcTextboxFontWeight =\n    ObcTextboxFontWeight.regular;\n\n  /** Render the trailing cap-height degree glyph (`°`). */\n  @property({type: Boolean}) hasDegree = false;\n\n  /** Show the leading marker-icon container (always on for setpoint/advice). */\n  @property({type: Boolean}) hasIcon = false;\n\n  /**\n   * Number of fraction digits. Must be between 0 and 100 — the range\n   * `Number.prototype.toFixed` accepts; outside it throws a `RangeError`.\n   * A fractional count truncates (`2.7` → `2`). A count that never arrived\n   * (`NaN`, `null` or unset) renders the reading as the unavailable dash —\n   * formatting with a precision the author never chose would let a critical\n   * `0.4` pass for a healthy `0`.\n   * @availableWhen valueType==number\n   */\n  @property({type: Number}) fractionDigits = 0;\n\n  /**\n   * Integer digits to reserve / hint (independent of `fractionDigits`).\n   * Bounded before use: a fractional count\n   * truncates (`2.7` → `2`), anything above 100 — including `Infinity` —\n   * caps at 100, and a negative count reserves nothing. A count that never\n   * arrived (`NaN`, `null` or unset) renders the reading as the unavailable\n   * dash, consistent with `fractionDigits`.\n   * @availableWhen valueType==number\n   */\n  @property({type: Number}) maxDigits = 0;\n\n  /**\n   * Render muted leading zeros filling the integer part to `maxDigits`.\n   * @availableWhen valueType==number\n   */\n  @property({type: Boolean}) hintedZeros = false;\n\n  /** Explicit longest string to reserve width for (e.g. `\"0000.0\"`). */\n  @property({type: String}) spaceReserver?: string;\n\n  /** Render `offText` instead of a number (e.g. equipment powered down). */\n  @property({type: Boolean}) off = false;\n\n  /** Text shown when `off` is true. */\n  @property({type: String}) offText = 'OFF';\n\n  /** Text alignment of the number within its reserved width. */\n  @property({type: String}) alignment: ObcTextboxAlignment =\n    ObcTextboxAlignment.Right;\n\n  /**\n   * Semantic category of an advice block — picks the default marker icon and\n   * the {@link active} styling. Only meaningful for `variant=\"advice\"`.\n   * @availableWhen variant==advice\n   */\n  @property({type: String}) category: ReadoutAdviceCategory =\n    ReadoutAdviceCategory.regular;\n\n  /**\n   * The advice is triggered: the marker swaps to its filled/status icon and\n   * the number takes the category's triggered styling (SemiBold for\n   * regular/optimal/eco, active text colour for the alert categories). Only\n   * meaningful for `variant=\"advice\"`.\n   * @availableWhen variant==advice\n   */\n  @property({type: Boolean}) active = false;\n\n  /** Per-block measurement quality (outline chip). */\n  @property({type: String}) dataQuality?: ReadoutBlockDataQuality;\n\n  // `boolean | …` (not `false | …`): the generated Angular wrapper widens a\n  // literal-`false` union to `boolean`. `wrapWithAlertFrame` treats any\n  // non-object as \"no frame\", so accepting `boolean` is harmless.\n  /** Per-block alert frame; nests inside any parent alert frame. */\n  @property({type: Object}) alert: boolean | AlertFrameConfig = false;\n\n  /** Setpoint focus (touch) state — only meaningful for `role=\"setpoint\"`. */\n  @property({type: Boolean}) touching = false;\n\n  /** Setpoint pop-up fade phase — only meaningful for `role=\"setpoint\"`. */\n  @property({type: String}) hidePhase: ReadoutBlockHidePhase =\n    ReadoutBlockHidePhase.none;\n\n  @state() private hasAssignedIcon = false;\n\n  private get resolvedValueSize(): ObcTextboxSize {\n    if (this.valueSize) {\n      return this.valueSize;\n    }\n    switch (this.size) {\n      case ReadoutBlockSize.large:\n        return ObcTextboxSize.l;\n      case ReadoutBlockSize.medium:\n        return ObcTextboxSize.m;\n      default:\n        return ObcTextboxSize.s;\n    }\n  }\n\n  /**\n   * `maxDigits` bounded to a usable count. Every width calculation below goes\n   * through this rather than the raw property, so an `Infinity` (or absurdly\n   * large) value cannot reach `String.prototype.repeat`.\n   */\n  private get resolvedMaxDigits(): number {\n    return resolveReadoutDigitCount(this.maxDigits);\n  }\n\n  /**\n   * Whether a digit knob failed to arrive (`NaN` / `null` / `undefined`).\n   * The reading then renders as the unavailable dash rather than silently\n   * formatting with a default the author never chose — a critical `0.4`\n   * formatted with a failed `fractionDigits` would otherwise print as a\n   * plausible-looking `0`. A missing `maxDigits` dashes too, for consistency:\n   * either knob arriving broken means the row's configuration cannot be\n   * trusted.\n   */\n  private get digitCountsMissing(): boolean {\n    return (\n      isReadoutDigitCountMissing(this.fractionDigits) ||\n      isReadoutDigitCountMissing(this.maxDigits)\n    );\n  }\n\n  private get numericFormatOptions(): ReadoutNumericFormatOptions {\n    return {\n      // The unavailable placeholder stays short (`\\u2012.\\u2012\\u2012`) rather than\n      // spelling out every reserved digit position — `maxDigits` already\n      // reserves the width, so it simply sits at the right edge of it.\n      showZeroPadding: false,\n      minValueLength: this.resolvedMaxDigits,\n      // A missing precision shapes the placeholder as zero fraction digits (a\n      // single dash) — and keeps a runtime `undefined`/`null` out of the\n      // options object, which is typed `number` throughout the formatters.\n      fractionDigits: isReadoutDigitCountMissing(this.fractionDigits)\n        ? 0\n        : this.fractionDigits,\n    };\n  }\n\n  /** Widest possible value string for width reservation (e.g. `\"000.0\"`). */\n  private get reserverText(): string {\n    const maxDigits = this.resolvedMaxDigits;\n    if (maxDigits <= 0) {\n      return '';\n    }\n    const integer = '0'.repeat(maxDigits);\n    return this.fractionDigits > 0\n      ? `${integer}.${'0'.repeat(this.fractionDigits)}`\n      : integer;\n  }\n\n  /**\n   * Effective width reserver: the wider of the explicit `spaceReserver` and the\n   * `maxDigits`/`fractionDigits`-derived reserve, so an explicit reserver can\n   * never reserve *less* than the formatted value needs. Under tabular-nums the\n   * rendered width is proportional to character count, so \"wider\" compares length.\n   */\n  private widerReserver(explicit: string | undefined, derived: string): string {\n    if (!explicit) {\n      return derived;\n    }\n    if (!derived) {\n      return explicit;\n    }\n    return explicit.length >= derived.length ? explicit : derived;\n  }\n\n  private dataQualityClasses(): Record<string, boolean> {\n    return {\n      'data-low-integrity':\n        this.dataQuality === ReadoutBlockDataQuality.lowIntegrity,\n      'data-invalid': this.dataQuality === ReadoutBlockDataQuality.invalid,\n    };\n  }\n\n  private onIconSlotChange = (event: Event): void => {\n    // `slotchange` fires after the first render once content is (re)assigned,\n    // so it covers the initial state without a firstUpdated re-render.\n    this.hasAssignedIcon =\n      (event.target as HTMLSlotElement).assignedElements({flatten: true})\n        .length > 0;\n  };\n\n  private renderIcon(): TemplateResult | typeof nothing {\n    // Value blocks only show an icon when asked; setpoint/advice always reserve\n    // their marker. The role default is rendered as a direct child (so it sizes\n    // via `.block-icon obi-*`) and hidden once an icon is assigned to the slot —\n    // `{flatten: true}` sees through a forwarded-but-empty parent slot, so the\n    // default still shows when the consumer overrides nothing.\n    const showIcon = this.variant !== ReadoutBlockVariant.value || this.hasIcon;\n    if (!showIcon) {\n      return nothing;\n    }\n    let fallback: TemplateResult | typeof nothing = nothing;\n    if (this.variant === ReadoutBlockVariant.setpoint) {\n      fallback = html`<obi-input-right></obi-input-right>`;\n    } else if (this.variant === ReadoutBlockVariant.advice) {\n      fallback = this.adviceFallbackIcon();\n    }\n    return html`<span class=\"block-icon\" part=\"block-icon\" aria-hidden=\"true\">\n      <slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot>\n      ${this.hasAssignedIcon ? nothing : fallback}\n    </span>`;\n  }\n\n  /**\n   * The advice marker for the current category / triggered state. Resting\n   * categories carry a neutral outline glyph (tinted via `currentColor`);\n   * triggered alert categories swap to the filled IEC status icon rendered\n   * with `useCssColor`, which selects the icon's token-coloured variant\n   * (alert fill + on-alert glyph, e.g. `--alert-caution-color` +\n   * `--on-caution-active-color`) — without it the same icon is a\n   * single-colour `currentColor` silhouette. This mirrors `obc-alert-icon`.\n   * The resting icons and the advice diamond deliberately stay on\n   * `currentColor`: their css-colour variants hard-code\n   * `--element-active-color`, which would defeat the neutral tint and the\n   * optimal / eco triggered tint applied from CSS.\n   */\n  private adviceFallbackIcon(): TemplateResult {\n    const active = this.active;\n    switch (this.category) {\n      case ReadoutAdviceCategory.caution:\n        return active\n          ? html`<obi-caution-color-iec useCssColor></obi-caution-color-iec>`\n          : html`<obi-caution-google></obi-caution-google>`;\n      case ReadoutAdviceCategory.warning:\n        return active\n          ? html`<obi-warning-unacknowledged-iec\n              useCssColor\n            ></obi-warning-unacknowledged-iec>`\n          : html`<obi-warning-unacknowledged-outlined></obi-warning-unacknowledged-outlined>`;\n      case ReadoutAdviceCategory.alarm:\n        return active\n          ? html`<obi-alarm-unacknowledged-iec\n              useCssColor\n            ></obi-alarm-unacknowledged-iec>`\n          : html`<obi-alarm></obi-alarm>`;\n      case ReadoutAdviceCategory.running:\n        return active\n          ? html`<obi-running-color-iec useCssColor></obi-running-color-iec>`\n          : html`<obi-running></obi-running>`;\n      default:\n        // regular / optimal / eco share the advice diamond; the triggered tint\n        // is applied via CSS on `.block-icon` (see `advice-*` classes).\n        return active\n          ? html`<obi-notification-advice-active></obi-notification-advice-active>`\n          : html`<obi-notification-advice></obi-notification-advice>`;\n    }\n  }\n\n  /**\n   * A cap-height `°` column whose width scales with the number size. Inherits the\n   * block's colour.\n   */\n  private renderDegreeGlyph(size: ObcTextboxSize): TemplateResult {\n    return html`\n      <span\n        class=${classMap({\n          'degree-column': true,\n          [`degree-${size}`]: true,\n          'degree-inherit': true,\n        })}\n        part=\"degree\"\n      >\n        <obc-textbox class=\"degree-glyph\" .size=${size} alignment=\"center\"\n          >°</obc-textbox\n        >\n      </span>\n    `;\n  }\n\n  protected override willUpdate(changed: Map<string, unknown>): void {\n    super.willUpdate(changed);\n    // Validated on EVERY update, deliberately NOT gated on `value`/`valueType`\n    // appearing in `changed`. When this assertion throws, Lit's `performUpdate`\n    // catch calls `__markUpdated()`, which clears the changed-properties map. A\n    // later update driven by any OTHER property — inside `obc-readout-list`,\n    // `align()` writing the shared reservers — would then see no `value` in\n    // `changed`, skip the check, and render the invalid value as a plain dash:\n    // exactly the silent failure this assertion exists to prevent.\n    assertReadoutValueType('obc-readout-block', this.value, this.valueType);\n    assertReadoutFractionDigits('obc-readout-block', this.fractionDigits);\n  }\n\n  override render() {\n    const valueSize = this.resolvedValueSize;\n    const isAdvice = this.variant === ReadoutBlockVariant.advice;\n    // Triggered regular/optimal/eco advice renders SemiBold (Figma 6.1); the\n    // alert categories keep the caller's weight and change colour instead.\n    const adviceSemibold =\n      isAdvice &&\n      this.active &&\n      (this.category === ReadoutAdviceCategory.regular ||\n        this.category === ReadoutAdviceCategory.optimal ||\n        this.category === ReadoutAdviceCategory.eco);\n    const weight = adviceSemibold ? ObcTextboxFontWeight.semibold : this.weight;\n    const formatOptions = this.numericFormatOptions;\n    const isTextMode = this.valueType === ReadoutValueType.text;\n    // A missing digit knob makes the reading untrustworthy, so it resolves to\n    // \"no reading\" and renders the dash (see `digitCountsMissing`). Text mode\n    // is unaffected — it ignores the numeric knobs entirely.\n    const valueForFormat = this.digitCountsMissing\n      ? undefined\n      : resolveReadoutNumericValue(this.value, this.valueType);\n    const textValue = resolveReadoutTextValue(this.value, this.valueType);\n    // Text mode renders verbatim and ignores the numeric format options; a\n    // blank / missing text value still falls back to the unavailable dash.\n    const text = this.off\n      ? this.offText\n      : isTextMode\n        ? (textValue ?? READOUT_UNAVAILABLE_DASH)\n        : formatNumericValue(valueForFormat, formatOptions);\n    // Hinted zeros pad the INTEGER part up to `maxDigits`, independent of\n    // `fractionDigits` (the decimal point and fraction digits never count toward\n    // `maxDigits`). Negative / dashed values are not padded. Example: value 1.2,\n    // maxDigits 3, fractionDigits 1 → \"001.2\".\n    const hintCount =\n      this.off ||\n      isTextMode ||\n      !this.hintedZeros ||\n      valueForFormat === undefined ||\n      valueForFormat < 0\n        ? 0\n        : Math.max(this.resolvedMaxDigits - readoutFormattedInteger(text), 0);\n    const hinted = hintCount > 0 ? '0'.repeat(hintCount) : '';\n    // Hinted zeros own the width — they already fill to `maxDigits` — so when\n    // `hintedZeros` is enabled an explicit `spaceReserver` is ignored (it has\n    // higher priority). Otherwise the wider of the explicit reserver and the\n    // `maxDigits`-derived reserve wins.\n    // Text mode ignores the `maxDigits`-derived numeric reserve — only an\n    // explicit `spaceReserver` still applies.\n    const reserver = isTextMode\n      ? (this.spaceReserver ?? '')\n      : this.hintedZeros\n        ? this.reserverText\n        : this.widerReserver(this.spaceReserver, this.reserverText);\n\n    const block = html`\n      <div\n        class=${classMap({\n          block: true,\n          [`block-${this.variant}`]: true,\n          [`size-${this.size}`]: true,\n          [`value-size-${valueSize}`]: true,\n          [`advice-${this.category}`]: isAdvice,\n          'advice-active': isAdvice && this.active,\n          'tone-enhanced': this.enhanced,\n          touching: this.touching,\n          'is-hiding': this.hidePhase === ReadoutBlockHidePhase.hiding,\n          'is-hidden': this.hidePhase === ReadoutBlockHidePhase.hidden,\n          ...this.dataQualityClasses(),\n        })}\n        part=\"block block-${this.variant}\"\n      >\n        ${this.renderIcon()}\n        <span class=\"block-content\" part=\"block-content\">\n          <obc-textbox\n            class=\"block-text\"\n            part=\"block-text\"\n            .size=${valueSize}\n            .fontWeight=${weight}\n            .alignment=${this.alignment}\n            .tabularNums=${true}\n          >\n            ${hinted\n              ? html`<span class=\"hinted-zero\" aria-hidden=\"true\"\n                  >${hinted}</span\n                >`\n              : nothing}${text}\n            ${reserver ? html`<span slot=\"length\">${reserver}</span>` : nothing}\n          </obc-textbox>\n          ${this.hasDegree ? this.renderDegreeGlyph(valueSize) : nothing}\n        </span>\n      </div>\n    `;\n    return wrapWithAlertFrame(this.alert ?? false, block);\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-readout-block': ObcReadoutBlock;\n  }\n}\n"],"names":["ReadoutBlockVariant","ReadoutBlockSize","ReadoutBlockDataQuality","ReadoutAdviceCategory","ReadoutBlockHidePhase"],"mappings":"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"}

package/dist/components/modal-window/modal-window.css.js

@@ -7,6 +7,10 @@ const componentStyle = css`* {
   box-sizing: border-box;
 }
 
+:host {
+  display: block;
+}
+
 .wrapper {
   box-sizing: border-box;
   background: var(--container-background-color);
@@ -18,6 +22,7 @@ const componentStyle = css`* {
   display: flex;
   flex-direction: column;
   width: 100%;
+  height: var(--obc-modal-window-height, auto);
   max-height: 90vh;
 }
 

package/dist/components/modal-window/modal-window.css.js.map

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

package/dist/components/modal-window/modal-window.d.ts

@@ -47,6 +47,13 @@ export declare 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>
@@ -71,6 +78,7 @@ export declare 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
  */
 export declare class ObcModalWindow extends LitElement {

package/dist/components/modal-window/modal-window.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-window.d.ts","sourceRoot":"","sources":["../../../src/components/modal-window/modal-window.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAMzD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,+BAA+B,CAAC;AACvC,OAAO,kCAAkC,CAAC;AAE1C;;;;;GAKG;AACH,oBAAY,kBAAkB;IAC5B,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C;;OAEG;IACuB,IAAI,qBAA4B;IAE1D;;OAEG;IACwB,iBAAiB,UAAS;IAErD;;OAEG;IACwB,cAAc,UAAS;IAElD;;OAEG;IAC0C,eAAe,UAAQ;IAEpE;;OAEG;IAC0C,cAAc,UAAQ;IAEnE,OAAO,CAAC,YAAY,CACiC;IAErD,OAAO,CAAC,aAAa,CACiC;IAEtD,OAAO,CAAC,WAAW,CAA2D;IAE9E,OAAO,CAAC,aAAa,CACiC;cAEnC,MAAM;IAiFzB,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
+{"version":3,"file":"modal-window.d.ts","sourceRoot":"","sources":["../../../src/components/modal-window/modal-window.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAMzD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,+BAA+B,CAAC;AACvC,OAAO,kCAAkC,CAAC;AAE1C;;;;;GAKG;AACH,oBAAY,kBAAkB;IAC5B,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C;;OAEG;IACuB,IAAI,qBAA4B;IAE1D;;OAEG;IACwB,iBAAiB,UAAS;IAErD;;OAEG;IACwB,cAAc,UAAS;IAElD;;OAEG;IAC0C,eAAe,UAAQ;IAEpE;;OAEG;IAC0C,cAAc,UAAQ;IAEnE,OAAO,CAAC,YAAY,CACiC;IAErD,OAAO,CAAC,aAAa,CACiC;IAEtD,OAAO,CAAC,WAAW,CAA2D;IAE9E,OAAO,CAAC,aAAa,CACiC;cAEnC,MAAM;IAiFzB,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/components/modal-window/modal-window.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-window.js","sources":["../../../src/components/modal-window/modal-window.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './modal-window.css?inline';\n\nimport '../button/button.js';\nimport '../icon-button/icon-button.js';\nimport '../../icons/icon-close-google.js';\n\n/**\n * Enum for modal window sizes.\n * - `small`: Compact size for minimal content.\n * - `medium`: Standard size for most content.\n * - `large`: Expanded size for complex content.\n */\nexport enum ObcModalWindowSize {\n  Small = 'small',\n  Medium = 'medium',\n  Large = 'large',\n}\n\n/**\n * `<obc-modal-window>` – A modular dialog component for displaying content and capturing user actions.\n *\n * The `obc-modal-window` provides a structured layout with a header (title and leading icon), a content area, and a footer with action buttons (Cancel, Done, and an optional custom action).\n *\n * ### Features\n * - **Flexible Sizing:** Supports `small`, `medium`, and `large` sizes to accommodate different content amounts.\n * - **Header Customization:** Includes a title slot and an optional leading icon slot.\n * - **Action Management:** Built-in \"Cancel\" and \"Done\" buttons, plus an optional additional action button.\n * - **Responsive Actions:** Action buttons automatically switch between horizontal and vertical layouts based on the modal size.\n *\n * ### Slots\n * | Slot Name     | Renders When...             | Purpose                                            |\n * |---------------|----------------------------|----------------------------------------------------|\n * | leading-icon  | `hasLeadingIcon` is true    | Icon displayed before the title                   |\n * | title         | Always                     | Main heading text for the modal                   |\n * | content       | Always                     | Primary content area of the modal                  |\n * | option-label  | `hasOptionalAction` is true | Label for the optional action button               |\n * | cancel-label  | `hasCancelAction` is true   | Label for the cancel button                        |\n * | done-label    | Always                     | Label for the primary (done) button                |\n *\n * ### Properties\n * - `size` (ObcModalWindowSize): Controls the width and layout of the modal. Default is `large`.\n * - `hasOptionalAction` (boolean): Shows an additional action button when true.\n * - `hasLeadingIcon` (boolean): Shows the leading icon slot when true.\n * - `hasCancelAction` (boolean): Shows the footer cancel button when true. Default is `true`.\n * - `hasCloseAction` (boolean): Shows the header close (X) button when true. Default is `true`.\n *\n * ### Events\n * - `close-click`: Fired when the close (X) button in the header is clicked.\n * - `cancel-click`: Fired when the cancel button is clicked.\n * - `done-click`: Fired when the done button is clicked.\n * - `option-click`: Fired when the optional action button is clicked.\n *\n * ### Example:\n * ```html\n * <obc-modal-window size=\"medium\" hasLeadingIcon>\n *   <span slot=\"leading-icon\"><obi-info></obi-info></span>\n *   <span slot=\"title\">Settings</span>\n *   <div slot=\"content\">\n *     <p>Adjust your preferences here.</p>\n *   </div>\n *   <span slot=\"cancel-label\">Discard</span>\n *   <span slot=\"done-label\">Save</span>\n * </obc-modal-window>\n * ```\n *\n * @fires {CustomEvent} close-click - Fired when the close button is clicked.\n * @fires {CustomEvent} cancel-click - Fired when the cancel button is clicked.\n * @fires {CustomEvent} done-click - Fired when the done button is clicked.\n * @fires {CustomEvent} option-click - Fired when the optional action button is clicked.\n *\n * @slot leading-icon - Slot for an icon to appear before the title (shown when `hasLeadingIcon` is true)\n * @slot title - Slot for the modal title text\n * @slot content - Slot for the main content area\n * @slot option-label - Slot for the label of the optional action button (shown when `hasOptionalAction` is true)\n * @slot cancel-label - Slot for the label of the cancel button (shown when `hasCancelAction` is true)\n * @slot done-label - Slot for the label of the done button\n * @stable\n */\n@customElement('obc-modal-window')\nexport class ObcModalWindow extends LitElement {\n  /**\n   * Controls the modal window size and action button layout.\n   */\n  @property({type: String}) size = ObcModalWindowSize.Large;\n\n  /**\n   * Whether to show an optional third action button.\n   */\n  @property({type: Boolean}) hasOptionalAction = false;\n\n  /**\n   * Whether to show the leading icon slot in the header.\n   */\n  @property({type: Boolean}) hasLeadingIcon = false;\n\n  /**\n   * Whether to show the footer cancel button.\n   */\n  @property({type: Boolean, attribute: false}) hasCancelAction = true;\n\n  /**\n   * Whether to show the header close (X) button.\n   */\n  @property({type: Boolean, attribute: false}) hasCloseAction = true;\n\n  private onCloseClick = () =>\n    this.dispatchEvent(new CustomEvent('close-click'));\n\n  private onCancelClick = () =>\n    this.dispatchEvent(new CustomEvent('cancel-click'));\n\n  private onDoneClick = () => this.dispatchEvent(new CustomEvent('done-click'));\n\n  private onOptionClick = () =>\n    this.dispatchEvent(new CustomEvent('option-click'));\n\n  protected override render() {\n    const isLarge = this.size === ObcModalWindowSize.Large;\n    const isMedium = this.size === ObcModalWindowSize.Medium;\n    const isSmall = this.size === ObcModalWindowSize.Small;\n    const stretchFooterActions = (isSmall || isMedium) && this.hasCancelAction;\n\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          [`size-${this.size}`]: true,\n        })}\n      >\n        <div\n          class=${classMap({\n            'title-container': true,\n            'without-close': !this.hasCloseAction,\n          })}\n        >\n          <div class=\"title-content\">\n            ${this.hasLeadingIcon\n              ? html`<div class=\"leading-icon\">\n                  <slot name=\"leading-icon\"></slot>\n                </div>`\n              : nothing}\n            <div class=\"label-container\">\n              <slot name=\"title\">Title</slot>\n            </div>\n          </div>\n          ${this.hasCloseAction\n            ? html`<obc-icon-button variant=\"flat\" @click=${this.onCloseClick}>\n                <obi-close-google></obi-close-google>\n              </obc-icon-button>`\n            : nothing}\n          <div class=\"divider\"></div>\n        </div>\n\n        <div class=\"content-area\">\n          <slot name=\"content\"></slot>\n        </div>\n\n        <div class=\"action-container\">\n          <div class=\"divider\"></div>\n          ${this.hasOptionalAction\n            ? html`<div class=\"optional-action-container\">\n                <obc-button @click=${this.onOptionClick} .fullWidth=${true}>\n                  <slot name=\"option-label\">Option</slot>\n                </obc-button>\n              </div>`\n            : nothing}\n\n          <div\n            class=${classMap({\n              'primary-action-container': true,\n              'primary-action-horizontal':\n                isLarge || isMedium || !this.hasCancelAction,\n              'primary-action-vertical': isSmall && this.hasCancelAction,\n              'without-cancel': !this.hasCancelAction,\n            })}\n          >\n            ${this.hasCancelAction\n              ? html`<obc-button\n                  @click=${this.onCancelClick}\n                  .fullWidth=${stretchFooterActions}\n                >\n                  <slot name=\"cancel-label\">Cancel</slot>\n                </obc-button>`\n              : nothing}\n            <obc-button\n              variant=\"raised\"\n              @click=${this.onDoneClick}\n              .fullWidth=${stretchFooterActions}\n            >\n              <slot name=\"done-label\">Done</slot>\n            </obc-button>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-modal-window': ObcModalWindow;\n  }\n}\n"],"names":["ObcModalWindowSize"],"mappings":";;;;;;;;;;;;;;;;;;AAgBO,IAAK,uCAAAA,wBAAL;AACLA,sBAAA,OAAA,IAAQ;AACRA,sBAAA,QAAA,IAAS;AACTA,sBAAA,OAAA,IAAQ;AAHE,SAAAA;AAAA,GAAA,sBAAA,CAAA,CAAA;AAmEL,IAAM,iBAAN,cAA6B,WAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA;AAIqB,SAAA,OAAO;AAKN,SAAA,oBAAoB;AAKpB,SAAA,iBAAiB;AAKC,SAAA,kBAAkB;AAKlB,SAAA,iBAAiB;AAE9D,SAAQ,eAAe,MACrB,KAAK,cAAc,IAAI,YAAY,aAAa,CAAC;AAEnD,SAAQ,gBAAgB,MACtB,KAAK,cAAc,IAAI,YAAY,cAAc,CAAC;AAEpD,SAAQ,cAAc,MAAM,KAAK,cAAc,IAAI,YAAY,YAAY,CAAC;AAE5E,SAAQ,gBAAgB,MACtB,KAAK,cAAc,IAAI,YAAY,cAAc,CAAC;AAAA,EAAA;AAAA,EAEjC,SAAS;AAC1B,UAAM,UAAU,KAAK,SAAS;AAC9B,UAAM,WAAW,KAAK,SAAS;AAC/B,UAAM,UAAU,KAAK,SAAS;AAC9B,UAAM,wBAAwB,WAAW,aAAa,KAAK;AAE3D,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS;AAAA,MACT,CAAC,QAAQ,KAAK,IAAI,EAAE,GAAG;AAAA,IAAA,CACxB,CAAC;AAAA;AAAA;AAAA,kBAGQ,SAAS;AAAA,MACf,mBAAmB;AAAA,MACnB,iBAAiB,CAAC,KAAK;AAAA,IAAA,CACxB,CAAC;AAAA;AAAA;AAAA,cAGE,KAAK,iBACH;AAAA;AAAA,0BAGA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAKX,KAAK,iBACH,8CAA8C,KAAK,YAAY;AAAA;AAAA,oCAG/D,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAUT,KAAK,oBACH;AAAA,qCACuB,KAAK,aAAa,eAAe,IAAI;AAAA;AAAA;AAAA,wBAI5D,OAAO;AAAA;AAAA;AAAA,oBAGD,SAAS;AAAA,MACf,4BAA4B;AAAA,MAC5B,6BACE,WAAW,YAAY,CAAC,KAAK;AAAA,MAC/B,2BAA2B,WAAW,KAAK;AAAA,MAC3C,kBAAkB,CAAC,KAAK;AAAA,IAAA,CACzB,CAAC;AAAA;AAAA,cAEA,KAAK,kBACH;AAAA,2BACW,KAAK,aAAa;AAAA,+BACd,oBAAoB;AAAA;AAAA;AAAA,iCAInC,OAAO;AAAA;AAAA;AAAA,uBAGA,KAAK,WAAW;AAAA,2BACZ,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ7C;AAGF;AAvHa,eAsHK,SAAS,UAAU,cAAc;AAlHvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAJb,eAIe,WAAA,QAAA,CAAA;AAKC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GATd,eASgB,WAAA,qBAAA,CAAA;AAKA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAdd,eAcgB,WAAA,kBAAA,CAAA;AAKkB,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GAnBhC,eAmBkC,WAAA,mBAAA,CAAA;AAKA,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GAxBhC,eAwBkC,WAAA,kBAAA,CAAA;AAxBlC,iBAAN,gBAAA;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB,cAAA;"}
+{"version":3,"file":"modal-window.js","sources":["../../../src/components/modal-window/modal-window.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './modal-window.css?inline';\n\nimport '../button/button.js';\nimport '../icon-button/icon-button.js';\nimport '../../icons/icon-close-google.js';\n\n/**\n * Enum for modal window sizes.\n * - `small`: Compact size for minimal content.\n * - `medium`: Standard size for most content.\n * - `large`: Expanded size for complex content.\n */\nexport enum ObcModalWindowSize {\n  Small = 'small',\n  Medium = 'medium',\n  Large = 'large',\n}\n\n/**\n * `<obc-modal-window>` – A modular dialog component for displaying content and capturing user actions.\n *\n * The `obc-modal-window` provides a structured layout with a header (title and leading icon), a content area, and a footer with action buttons (Cancel, Done, and an optional custom action).\n *\n * ### Features\n * - **Flexible Sizing:** Supports `small`, `medium`, and `large` sizes to accommodate different content amounts.\n * - **Header Customization:** Includes a title slot and an optional leading icon slot.\n * - **Action Management:** Built-in \"Cancel\" and \"Done\" buttons, plus an optional additional action button.\n * - **Responsive Actions:** Action buttons automatically switch between horizontal and vertical layouts based on the modal size.\n *\n * ### Slots\n * | Slot Name     | Renders When...             | Purpose                                            |\n * |---------------|----------------------------|----------------------------------------------------|\n * | leading-icon  | `hasLeadingIcon` is true    | Icon displayed before the title                   |\n * | title         | Always                     | Main heading text for the modal                   |\n * | content       | Always                     | Primary content area of the modal                  |\n * | option-label  | `hasOptionalAction` is true | Label for the optional action button               |\n * | cancel-label  | `hasCancelAction` is true   | Label for the cancel button                        |\n * | done-label    | Always                     | Label for the primary (done) button                |\n *\n * ### Properties\n * - `size` (ObcModalWindowSize): Controls the width and layout of the modal. Default is `large`.\n * - `hasOptionalAction` (boolean): Shows an additional action button when true.\n * - `hasLeadingIcon` (boolean): Shows the leading icon slot when true.\n * - `hasCancelAction` (boolean): Shows the footer cancel button when true. Default is `true`.\n * - `hasCloseAction` (boolean): Shows the header close (X) button when true. Default is `true`.\n *\n * ### Events\n * - `close-click`: Fired when the close (X) button in the header is clicked.\n * - `cancel-click`: Fired when the cancel button is clicked.\n * - `done-click`: Fired when the done button is clicked.\n * - `option-click`: Fired when the optional action button is clicked.\n *\n * ### Sizing\n * By default the modal is as tall as its content, capped at `90vh`. To give it\n * an explicit height, set the `--obc-modal-window-height` custom property on\n * the element — either a fixed value (`--obc-modal-window-height: 360px`) or\n * `100%` to fill a host element that is sized by its container. The `90vh` cap\n * always applies, and the content area scrolls when the content does not fit.\n *\n * ### Example:\n * ```html\n * <obc-modal-window size=\"medium\" hasLeadingIcon>\n *   <span slot=\"leading-icon\"><obi-info></obi-info></span>\n *   <span slot=\"title\">Settings</span>\n *   <div slot=\"content\">\n *     <p>Adjust your preferences here.</p>\n *   </div>\n *   <span slot=\"cancel-label\">Discard</span>\n *   <span slot=\"done-label\">Save</span>\n * </obc-modal-window>\n * ```\n *\n * @fires {CustomEvent} close-click - Fired when the close button is clicked.\n * @fires {CustomEvent} cancel-click - Fired when the cancel button is clicked.\n * @fires {CustomEvent} done-click - Fired when the done button is clicked.\n * @fires {CustomEvent} option-click - Fired when the optional action button is clicked.\n *\n * @slot leading-icon - Slot for an icon to appear before the title (shown when `hasLeadingIcon` is true)\n * @slot title - Slot for the modal title text\n * @slot content - Slot for the main content area\n * @slot option-label - Slot for the label of the optional action button (shown when `hasOptionalAction` is true)\n * @slot cancel-label - Slot for the label of the cancel button (shown when `hasCancelAction` is true)\n * @slot done-label - Slot for the label of the done button\n * @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.\n * @stable\n */\n@customElement('obc-modal-window')\nexport class ObcModalWindow extends LitElement {\n  /**\n   * Controls the modal window size and action button layout.\n   */\n  @property({type: String}) size = ObcModalWindowSize.Large;\n\n  /**\n   * Whether to show an optional third action button.\n   */\n  @property({type: Boolean}) hasOptionalAction = false;\n\n  /**\n   * Whether to show the leading icon slot in the header.\n   */\n  @property({type: Boolean}) hasLeadingIcon = false;\n\n  /**\n   * Whether to show the footer cancel button.\n   */\n  @property({type: Boolean, attribute: false}) hasCancelAction = true;\n\n  /**\n   * Whether to show the header close (X) button.\n   */\n  @property({type: Boolean, attribute: false}) hasCloseAction = true;\n\n  private onCloseClick = () =>\n    this.dispatchEvent(new CustomEvent('close-click'));\n\n  private onCancelClick = () =>\n    this.dispatchEvent(new CustomEvent('cancel-click'));\n\n  private onDoneClick = () => this.dispatchEvent(new CustomEvent('done-click'));\n\n  private onOptionClick = () =>\n    this.dispatchEvent(new CustomEvent('option-click'));\n\n  protected override render() {\n    const isLarge = this.size === ObcModalWindowSize.Large;\n    const isMedium = this.size === ObcModalWindowSize.Medium;\n    const isSmall = this.size === ObcModalWindowSize.Small;\n    const stretchFooterActions = (isSmall || isMedium) && this.hasCancelAction;\n\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          [`size-${this.size}`]: true,\n        })}\n      >\n        <div\n          class=${classMap({\n            'title-container': true,\n            'without-close': !this.hasCloseAction,\n          })}\n        >\n          <div class=\"title-content\">\n            ${this.hasLeadingIcon\n              ? html`<div class=\"leading-icon\">\n                  <slot name=\"leading-icon\"></slot>\n                </div>`\n              : nothing}\n            <div class=\"label-container\">\n              <slot name=\"title\">Title</slot>\n            </div>\n          </div>\n          ${this.hasCloseAction\n            ? html`<obc-icon-button variant=\"flat\" @click=${this.onCloseClick}>\n                <obi-close-google></obi-close-google>\n              </obc-icon-button>`\n            : nothing}\n          <div class=\"divider\"></div>\n        </div>\n\n        <div class=\"content-area\">\n          <slot name=\"content\"></slot>\n        </div>\n\n        <div class=\"action-container\">\n          <div class=\"divider\"></div>\n          ${this.hasOptionalAction\n            ? html`<div class=\"optional-action-container\">\n                <obc-button @click=${this.onOptionClick} .fullWidth=${true}>\n                  <slot name=\"option-label\">Option</slot>\n                </obc-button>\n              </div>`\n            : nothing}\n\n          <div\n            class=${classMap({\n              'primary-action-container': true,\n              'primary-action-horizontal':\n                isLarge || isMedium || !this.hasCancelAction,\n              'primary-action-vertical': isSmall && this.hasCancelAction,\n              'without-cancel': !this.hasCancelAction,\n            })}\n          >\n            ${this.hasCancelAction\n              ? html`<obc-button\n                  @click=${this.onCancelClick}\n                  .fullWidth=${stretchFooterActions}\n                >\n                  <slot name=\"cancel-label\">Cancel</slot>\n                </obc-button>`\n              : nothing}\n            <obc-button\n              variant=\"raised\"\n              @click=${this.onDoneClick}\n              .fullWidth=${stretchFooterActions}\n            >\n              <slot name=\"done-label\">Done</slot>\n            </obc-button>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-modal-window': ObcModalWindow;\n  }\n}\n"],"names":["ObcModalWindowSize"],"mappings":";;;;;;;;;;;;;;;;;;AAgBO,IAAK,uCAAAA,wBAAL;AACLA,sBAAA,OAAA,IAAQ;AACRA,sBAAA,QAAA,IAAS;AACTA,sBAAA,OAAA,IAAQ;AAHE,SAAAA;AAAA,GAAA,sBAAA,CAAA,CAAA;AA2EL,IAAM,iBAAN,cAA6B,WAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA;AAIqB,SAAA,OAAO;AAKN,SAAA,oBAAoB;AAKpB,SAAA,iBAAiB;AAKC,SAAA,kBAAkB;AAKlB,SAAA,iBAAiB;AAE9D,SAAQ,eAAe,MACrB,KAAK,cAAc,IAAI,YAAY,aAAa,CAAC;AAEnD,SAAQ,gBAAgB,MACtB,KAAK,cAAc,IAAI,YAAY,cAAc,CAAC;AAEpD,SAAQ,cAAc,MAAM,KAAK,cAAc,IAAI,YAAY,YAAY,CAAC;AAE5E,SAAQ,gBAAgB,MACtB,KAAK,cAAc,IAAI,YAAY,cAAc,CAAC;AAAA,EAAA;AAAA,EAEjC,SAAS;AAC1B,UAAM,UAAU,KAAK,SAAS;AAC9B,UAAM,WAAW,KAAK,SAAS;AAC/B,UAAM,UAAU,KAAK,SAAS;AAC9B,UAAM,wBAAwB,WAAW,aAAa,KAAK;AAE3D,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS;AAAA,MACT,CAAC,QAAQ,KAAK,IAAI,EAAE,GAAG;AAAA,IAAA,CACxB,CAAC;AAAA;AAAA;AAAA,kBAGQ,SAAS;AAAA,MACf,mBAAmB;AAAA,MACnB,iBAAiB,CAAC,KAAK;AAAA,IAAA,CACxB,CAAC;AAAA;AAAA;AAAA,cAGE,KAAK,iBACH;AAAA;AAAA,0BAGA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAKX,KAAK,iBACH,8CAA8C,KAAK,YAAY;AAAA;AAAA,oCAG/D,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAUT,KAAK,oBACH;AAAA,qCACuB,KAAK,aAAa,eAAe,IAAI;AAAA;AAAA;AAAA,wBAI5D,OAAO;AAAA;AAAA;AAAA,oBAGD,SAAS;AAAA,MACf,4BAA4B;AAAA,MAC5B,6BACE,WAAW,YAAY,CAAC,KAAK;AAAA,MAC/B,2BAA2B,WAAW,KAAK;AAAA,MAC3C,kBAAkB,CAAC,KAAK;AAAA,IAAA,CACzB,CAAC;AAAA;AAAA,cAEA,KAAK,kBACH;AAAA,2BACW,KAAK,aAAa;AAAA,+BACd,oBAAoB;AAAA;AAAA;AAAA,iCAInC,OAAO;AAAA;AAAA;AAAA,uBAGA,KAAK,WAAW;AAAA,2BACZ,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ7C;AAGF;AAvHa,eAsHK,SAAS,UAAU,cAAc;AAlHvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAJb,eAIe,WAAA,QAAA,CAAA;AAKC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GATd,eASgB,WAAA,qBAAA,CAAA;AAKA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAdd,eAcgB,WAAA,kBAAA,CAAA;AAKkB,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GAnBhC,eAmBkC,WAAA,mBAAA,CAAA;AAKA,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GAxBhC,eAwBkC,WAAA,kBAAA,CAAA;AAxBlC,iBAAN,gBAAA;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB,cAAA;"}

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

@@ -106,6 +106,10 @@ const componentStyle = css`* {
   transition: width 0.3s ease-in-out;
 }
 
+.bar.priority-regular .loaded {
+  background-color: var(--instrument-regular-secondary-color);
+}
+
 .indeterminate-track {
   position: absolute;
   top: 0;
@@ -117,6 +121,10 @@ const componentStyle = css`* {
   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/dist/components/progress-bar/progress-bar.css.js.map

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

package/dist/components/progress-bar/progress-bar.d.ts

@@ -1,5 +1,7 @@
 import { LitElement } from 'lit';
+import { Priority } from '../../navigation-instruments/types.js';
 import '../../icons/icon-placeholder.js';
+export { Priority };
 export declare enum ProgressBarType {
     linear = "linear",
     circular = "circular"
@@ -35,6 +37,10 @@ export declare 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.
@@ -87,6 +93,11 @@ export declare class ObcProgressBar extends LitElement {
      * @availableWhen type==circular
      */
     circularState: CircularProgressState;
+    /**
+     * Color emphasis of the bar fill: `regular` (gray) or `enhanced` (blue).
+     * @availableWhen type==linear
+     */
+    priority: Priority;
     /** Progress percentage (0–100); clamped when rendered. */
     value: number;
     /**

package/dist/components/progress-bar/progress-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,iCAAiC,CAAC;AAGzC,oBAAY,eAAe;IACzB,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AAED,oBAAY,eAAe;IACzB,WAAW,gBAAgB;IAC3B,aAAa,kBAAkB;CAChC;AAED,oBAAY,qBAAqB;IAC/B,WAAW,gBAAgB;IAC3B,aAAa,kBAAkB;IAC/B,IAAI,SAAS;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,mEAAmE;IACzC,IAAI,EAAE,eAAe,CAA0B;IACzE;;;OAGG;IACuB,IAAI,EAAE,eAAe,CAA+B;IAC9E;;;;OAIG;IACuB,aAAa,EAAE,qBAAqB,CAC1B;IACpC,0DAA0D;IAChC,KAAK,SAAK;IACpC;;;OAGG;IACwB,SAAS,UAAS;IAC7C;;;OAGG;IACwB,QAAQ,UAAS;IAC5C;;;OAGG;IACwB,cAAc,UAAS;IAClD;;;OAGG;IACuB,WAAW,SAAsB;IAC3D;;;;;;OAMG;IACwB,SAAS,UAAS;IAC7C;;;OAGG;IACuB,UAAU,SAAU;IAC9C;;;;OAIG;IACwB,wBAAwB,UAAS;IAEnD,MAAM;IAQf,OAAO,CAAC,uBAAuB;IAa/B,OAAO,CAAC,sBAAsB;IAkB9B,OAAO,CAAC,qBAAqB;IAwC7B,OAAO,CAAC,oBAAoB;IA8B5B,OAAO,CAAC,WAAW;IAsBnB,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
+{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAMzD,OAAO,iCAAiC,CAAC;AAEzC,OAAO,EAAC,QAAQ,EAAC,MAAM,uCAAuC,CAAC;AAE/D,OAAO,EAAC,QAAQ,EAAC,CAAC;AAElB,oBAAY,eAAe;IACzB,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AAED,oBAAY,eAAe;IACzB,WAAW,gBAAgB;IAC3B,aAAa,kBAAkB;CAChC;AAED,oBAAY,qBAAqB;IAC/B,WAAW,gBAAgB;IAC3B,aAAa,kBAAkB;IAC/B,IAAI,SAAS;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,mEAAmE;IACzC,IAAI,EAAE,eAAe,CAA0B;IACzE;;;OAGG;IACuB,IAAI,EAAE,eAAe,CAA+B;IAC9E;;;;OAIG;IACuB,aAAa,EAAE,qBAAqB,CAC1B;IACpC;;;OAGG;IACuB,QAAQ,EAAE,QAAQ,CAAqB;IACjE,0DAA0D;IAChC,KAAK,SAAK;IACpC;;;OAGG;IACwB,SAAS,UAAS;IAC7C;;;OAGG;IACwB,QAAQ,UAAS;IAC5C;;;OAGG;IACwB,cAAc,UAAS;IAClD;;;OAGG;IACuB,WAAW,SAAsB;IAC3D;;;;;;OAMG;IACwB,SAAS,UAAS;IAC7C;;;OAGG;IACuB,UAAU,SAAU;IAC9C;;;;OAIG;IACwB,wBAAwB,UAAS;IAEnD,MAAM;IAQf,OAAO,CAAC,uBAAuB;IAa/B,OAAO,CAAC,sBAAsB;IAkB9B,OAAO,CAAC,qBAAqB;IAwC7B,OAAO,CAAC,oBAAoB;IAkC5B,OAAO,CAAC,WAAW;IAsBnB,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

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

@@ -1,10 +1,12 @@
 import { unsafeCSS, LitElement, html, nothing } 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.js";
 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";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -37,6 +39,7 @@ let ObcProgressBar = class extends LitElement {
     this.type = "linear";
     this.mode = "determinate";
     this.circularState = "determinate";
+    this.priority = Priority.enhanced;
     this.value = 0;
     this.showValue = false;
     this.showUnit = false;
@@ -116,11 +119,15 @@ let ObcProgressBar = class extends LitElement {
   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 === "determinate" ? html`
                 <div
                   class="loaded"
@@ -167,6 +174,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], ObcProgressBar.prototype, "circularState", 2);
+__decorateClass([
+  property({ type: String })
+], ObcProgressBar.prototype, "priority", 2);
 __decorateClass([
   property({ type: Number })
 ], ObcProgressBar.prototype, "value", 2);
@@ -197,6 +207,7 @@ ObcProgressBar = __decorateClass([
 export {
   CircularProgressState,
   ObcProgressBar,
+  Priority,
   ProgressBarMode,
   ProgressBarType
 };