npm - @oicl/openbridge-webcomponents-full-bundle - Versions diffs - 2.0.0-next.130 → 2.0.0-next.131 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/custom-elements.json CHANGED Viewed

@@ -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/components/modal-window/modal-window.css.js CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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 CHANGED Viewed

	@@ -1 +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;"}
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 ### 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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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
 };

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

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

package/package.json CHANGED Viewed

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

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

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

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

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

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

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

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

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