@oicl/openbridge-webcomponents 2.0.0-next.50 → 2.0.0-next.51

package/dist/components/icon-button/icon-button.css.js

@@ -353,33 +353,33 @@ const iconStyle = css`
 }
 
 .wrapper.variant-integration .visible-wrapper {
-            border-color: var(--integration-normal-enabled-border-color);
-            background-color: var(--integration-normal-enabled-background-color);
+            border-color: var(--integration-flat-enabled-border-color);
+            background-color: var(--integration-flat-enabled-background-color);
             border-width: 1px;
             border-style: solid;
             cursor: pointer;
-            --base-border-color: var(--integration-normal-enabled-border-color);
-            --base-background-color: var(--integration-normal-enabled-background-color);
+            --base-border-color: var(--integration-flat-enabled-border-color);
+            --base-background-color: var(--integration-flat-enabled-background-color);
 }
 
 .wrapper.variant-integration.activated .visible-wrapper {
-            border-color: var(--integration-normal-activated-border-color);
-            background-color: var(--integration-normal-activated-background-color);
-            --base-border-color: var(--integration-normal-activated-border-color);
-            --base-background-color: var(--integration-normal-activated-background-color);
+            border-color: var(--integration-flat-activated-border-color);
+            background-color: var(--integration-flat-activated-background-color);
+            --base-border-color: var(--integration-flat-activated-border-color);
+            --base-background-color: var(--integration-flat-activated-background-color);
 }
 
 @media (hover:hover) {
 
 .wrapper.variant-integration:hover .visible-wrapper {
-                        border-color: color-mix(in srgb, var(--integration-normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-                        background-color: color-mix(in srgb, var(--integration-normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
+                        border-color: color-mix(in srgb, var(--integration-flat-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
+                        background-color: color-mix(in srgb, var(--integration-flat-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
             }
 }
 
 .wrapper.variant-integration:active .visible-wrapper {
-            border-color: var(--integration-normal-pressed-border-color);
-            background-color: var(--integration-normal-pressed-background-color);
+            border-color: var(--integration-flat-pressed-border-color);
+            background-color: var(--integration-flat-pressed-background-color);
 }
 
 .wrapper.variant-integration:focus-visible .visible-wrapper {
@@ -391,17 +391,17 @@ const iconStyle = css`
 }
 
 .wrapper.variant-integration:disabled .visible-wrapper {
-            border-color: var(--integration-normal-disabled-border-color);
-            background-color: var(--integration-normal-disabled-background-color);
+            border-color: var(--integration-flat-disabled-border-color);
+            background-color: var(--integration-flat-disabled-background-color);
             cursor: not-allowed;
-            color: var(--integration-on-normal-disabled-color) !important;
+            color: var(--integration-on-flat-disabled-color) !important;
 }
 
 .wrapper.variant-integration.disabled .visible-wrapper {
-            border-color: var(--integration-normal-disabled-border-color);
-            background-color: var(--integration-normal-disabled-background-color);
+            border-color: var(--integration-flat-disabled-border-color);
+            background-color: var(--integration-flat-disabled-background-color);
             cursor: not-allowed;
-            color: var(--integration-on-normal-disabled-color) !important;
+            color: var(--integration-on-flat-disabled-color) !important;
 }
 
 .wrapper.variant-integration:disabled {

package/dist/components/icon-button/icon-button.d.ts

@@ -4,6 +4,7 @@ import { LitElement, nothing } from 'lit';
  * - `normal`: Standard appearance for most use cases.
  * - `raised`: Adds elevation/shadow for prominence.
  * - `flat`: Minimal, backgroundless style for subtle actions.
+ * - `integration`: For use in Integration Bar components
  */
 export declare enum IconButtonVariant {
     normal = "normal",
@@ -23,6 +24,7 @@ export declare enum IconButtonVariant {
  *   - `normal` (default): Standard appearance for most use cases.
  *   - `raised`: Adds elevation/shadow for prominence.
  *   - `flat`: Minimal, backgroundless style for subtle actions.
+ *   - `integration`: For use in Integration Bar components
  * - **Progress Indicator:**
  *   - Shows a circular progress spinner overlay when the `progress` property is set (0–100). Useful for indicating loading or ongoing actions.
  * - **Label Support:**

package/dist/components/icon-button/icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAQ,OAAO,EAAY,MAAM,KAAK,CAAC;AAMzD;;;;;GAKG;AACH,oBAAY,iBAAiB;IAC3B,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,WAAW,gBAAgB;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C;;;;;OAKG;IACuB,OAAO,EAAE,iBAAiB,CACzB;IAE3B;;;OAGG;IACwB,SAAS,UAAS;IAE7C;;;OAGG;IACwB,UAAU,UAAS;IAE9C;;;OAGG;IACwB,WAAW,UAAS;IAE/C;;;OAGG;IACwB,WAAW,UAAS;IAE/C;;OAEG;IACwB,IAAI,UAAS;IAExC;;OAEG;IACwB,QAAQ,UAAS;IAE5C;;;;OAIG;IACuB,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAa;IAEnE;;OAEG;IACwB,QAAQ,EAAE,OAAO,CAAS;IAErD,iFAAiF;IACpC,WAAW,UAAQ;IAEhE,IAAI,eAAe,0DAoDlB;IAEQ,MAAM;IAiCf,OAAgB,MAAM,0BAAwB;CAC/C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAQ,OAAO,EAAY,MAAM,KAAK,CAAC;AAMzD;;;;;;GAMG;AACH,oBAAY,iBAAiB;IAC3B,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,WAAW,gBAAgB;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C;;;;;OAKG;IACuB,OAAO,EAAE,iBAAiB,CACzB;IAE3B;;;OAGG;IACwB,SAAS,UAAS;IAE7C;;;OAGG;IACwB,UAAU,UAAS;IAE9C;;;OAGG;IACwB,WAAW,UAAS;IAE/C;;;OAGG;IACwB,WAAW,UAAS;IAE/C;;OAEG;IACwB,IAAI,UAAS;IAExC;;OAEG;IACwB,QAAQ,UAAS;IAE5C;;;;OAIG;IACuB,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAa;IAEnE;;OAEG;IACwB,QAAQ,EAAE,OAAO,CAAS;IAErD,iFAAiF;IACpC,WAAW,UAAQ;IAEhE,IAAI,eAAe,0DAoDlB;IAEQ,MAAM;IAiCf,OAAgB,MAAM,0BAAwB;CAC/C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/icon-button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sources":["../../../src/components/icon-button/icon-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport iconStyle from './icon-button.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\n\n/**\n * The available visual variants for `<obc-icon-button>`.\n * - `normal`: Standard appearance for most use cases.\n * - `raised`: Adds elevation/shadow for prominence.\n * - `flat`: Minimal, backgroundless style for subtle actions.\n */\nexport enum IconButtonVariant {\n  normal = 'normal',\n  raised = 'raised',\n  flat = 'flat',\n  integration = 'integration',\n}\n\n/**\n * `<obc-icon-button>` – An icon-only or icon-with-label button for quick actions.\n *\n * Provides a compact, visually prominent button that displays an icon (and optionally a label) for triggering actions. Commonly used for toolbars, navigation, or contextual actions where space is limited and a recognizable icon can represent the function.\n *\n * Appears as a circular or rounded button with configurable visual styles, supporting progress indication and various layout adaptations.\n *\n * ## Features\n * - **Variants:**\n *   - `normal` (default): Standard appearance for most use cases.\n *   - `raised`: Adds elevation/shadow for prominence.\n *   - `flat`: Minimal, backgroundless style for subtle actions.\n * - **Progress Indicator:**\n *   - Shows a circular progress spinner overlay when the `progress` property is set (0–100). Useful for indicating loading or ongoing actions.\n * - **Label Support:**\n *   - Optionally displays a text label below the icon when `hasLabel` is true and content is provided in the `label` slot.\n * - **Corner Alignment:**\n *   - `cornerLeft` and `cornerRight` adjust the button's border radius and alignment for seamless placement at the start or end of a container.\n * - **Active State:**\n *   - `activated` visually highlights the button as selected or toggled.\n *   - `activeColor` applies an accent color for emphasis.\n * - **Wide Mode:**\n *   - `wide` increases the button's width for easier touch targets or visual balance.\n * - **Disabled State:**\n *   - `disabled` prevents interaction and visually dims the button.\n *\n * ## Usage Guidelines\n * - Use `obc-icon-button` for actions represented by icons, such as toolbars, navigation, or quick-access commands.\n * - Add a label (with `hasLabel` and the `label` slot) when clarity is needed or when icons alone may not be universally understood.\n * - Use the progress indicator for actions that take time, such as uploads or background processes.\n * - Prefer the `normal` variant for most cases; use `raised` to draw attention, and `flat` for less prominent or inline actions.\n * - For grouped or edge-aligned layouts, use `cornerLeft` or `cornerRight` to visually merge with container edges.\n * - Avoid using icon buttons for destructive or critical actions unless paired with clear feedback.\n * - **TODO(designer):** Clarify recommended icon sizes and when to use label vs. icon-only.\n *\n * ## Slots\n * | Slot Name | Renders When...      | Purpose                                      |\n * |-----------|---------------------|----------------------------------------------|\n * | (default) | Always              | The icon to display (e.g., `<obi-search>`)   |\n * | label     | If `hasLabel` is set | Optional label text below the icon           |\n *\n * ## Events\n * - Emits a standard `click` event (`onClick` handler in framework wrappers) when activated.\n *\n * ## Best Practices\n * - Ensure icons are clear and universally recognizable.\n * - For accessibility, provide an `aria-label` or descriptive label for the button's action.\n * - When using the progress indicator, avoid showing it for very short actions to prevent visual flicker.\n *\n * ## Example:\n * ```\n * <obc-icon-button variant=\"normal\">\n *   <obi-search></obi-search>\n * </obc-icon-button>\n *\n * <obc-icon-button variant=\"normal\" hasLabel>\n *   <obi-arrow></obi-arrow>\n *   <span slot=\"label\">Next</span>\n * </obc-icon-button>\n * ```\n *\n * @slot - Icon slot (default): Place an icon such as <obi-search> here.\n * @slot label - Optional label shown below the icon when `hasLabel` is true.\n * @fires click - Fired when the button is clicked (if not disabled).\n */\n@customElement('obc-icon-button')\nexport class ObcIconButton extends LitElement {\n  /**\n   * Visual style of the button.\n   * - `normal`: Standard appearance (default).\n   * - `raised`: Elevated with shadow.\n   * - `flat`: Minimal, backgroundless style.\n   */\n  @property({type: String}) variant: IconButtonVariant =\n    IconButtonVariant.normal;\n\n  /**\n   * Whether the button is in an activated (selected/toggled) state.\n   * Visually highlights the button to indicate selection.\n   */\n  @property({type: Boolean}) activated = false;\n\n  /**\n   * If true, aligns the button to the left edge and removes left border radius.\n   * Useful for grouping or edge-aligned layouts.\n   */\n  @property({type: Boolean}) cornerLeft = false;\n\n  /**\n   * If true, aligns the button to the right edge and removes right border radius.\n   * Useful for grouping or edge-aligned layouts.\n   */\n  @property({type: Boolean}) cornerRight = false;\n\n  /**\n   * Applies an accent color to the button for emphasis.\n   * Used to visually distinguish active or important actions.\n   */\n  @property({type: Boolean}) activeColor = false;\n\n  /**\n   * Increases the button's width for larger touch targets or visual balance.\n   */\n  @property({type: Boolean}) wide = false;\n\n  /**\n   * Disables the button, preventing user interaction and dimming its appearance.\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * Shows a circular progress indicator overlay when set (0–100).\n   * Use to indicate ongoing actions or loading states.\n   * If undefined, no progress indicator is shown.\n   */\n  @property({type: Number}) progress: undefined | number = undefined;\n\n  /**\n   * If true, displays a label below the icon using the `label` slot.\n   */\n  @property({type: Boolean}) hasLabel: boolean = false;\n\n  /** If false, and cornerLeft or cornerRight is true, the divider is not shown. */\n  @property({type: Boolean, attribute: false}) showDivider = true;\n\n  get progressSpinner() {\n    if (this.progress === undefined) {\n      return nothing;\n    }\n    if (this.progress === 100) {\n      return html`<div class=\"progress-spinner\">\n        <svg\n          width=\"40\"\n          height=\"40\"\n          viewBox=\"0 0 40 40\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"20\"\n            cy=\"20\"\n            r=\"18\"\n            stroke=\"#325B9A\"\n            stroke-width=\"4\"\n            fill=\"none\"\n          />\n        </svg>\n      </div>`;\n    }\n    const angleRad = (this.progress * 0.95 * 3.6 * Math.PI) / 180;\n    const x = 20 + 18 * Math.sin(angleRad);\n    const y = 20 - 18 * Math.cos(angleRad);\n    const largeArcFlag = angleRad > Math.PI ? 1 : 0;\n    return html`<div class=\"progress-spinner\">\n      <svg\n        width=\"40\"\n        height=\"40\"\n        viewBox=\"0 0 40 40\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle\n          cx=\"20\"\n          cy=\"20\"\n          r=\"18\"\n          stroke=\"var(--container-backdrop-color)\"\n          stroke-width=\"4\"\n          fill=\"none\"\n        />\n        <path\n          d=\"M18 2 A18 18 0 ${largeArcFlag} 1 ${x} ${y}\"\n          stroke=\"var(--instrument-enhanced-secondary-color)\"\n          stroke-width=\"4\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>`;\n  }\n\n  override render() {\n    return html`\n      <button\n        class=${classMap({\n          wrapper: true,\n          ['variant-' + this.variant]: true,\n          activated: this.activated,\n          'corner-left': this.cornerLeft,\n          'corner-right': this.cornerRight,\n          'active-color': this.activeColor,\n          'has-label': this.hasLabel,\n          wide: this.wide,\n          progress: this.progress !== undefined,\n          'hide-divider': !this.showDivider,\n        })}\n        ?disabled=${this.disabled}\n        part=\"wrapper\"\n      >\n        ${this.progress !== undefined ? this.progressSpinner : nothing}\n        <div class=\"visible-wrapper\" part=\"visible-wrapper\">\n          <div class=\"icon\" part=\"icon\">\n            <slot></slot>\n          </div>\n        </div>\n        ${this.hasLabel\n          ? html`<div class=\"label\" part=\"label\">\n              <slot name=\"label\"></slot>\n            </div>`\n          : nothing}\n      </button>\n    `;\n  }\n\n  static override styles = unsafeCSS(iconStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-icon-button': ObcIconButton;\n  }\n}\n"],"names":["IconButtonVariant"],"mappings":"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"}
+{"version":3,"file":"icon-button.js","sources":["../../../src/components/icon-button/icon-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport iconStyle from './icon-button.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\n\n/**\n * The available visual variants for `<obc-icon-button>`.\n * - `normal`: Standard appearance for most use cases.\n * - `raised`: Adds elevation/shadow for prominence.\n * - `flat`: Minimal, backgroundless style for subtle actions.\n * - `integration`: For use in Integration Bar components\n */\nexport enum IconButtonVariant {\n  normal = 'normal',\n  raised = 'raised',\n  flat = 'flat',\n  integration = 'integration',\n}\n\n/**\n * `<obc-icon-button>` – An icon-only or icon-with-label button for quick actions.\n *\n * Provides a compact, visually prominent button that displays an icon (and optionally a label) for triggering actions. Commonly used for toolbars, navigation, or contextual actions where space is limited and a recognizable icon can represent the function.\n *\n * Appears as a circular or rounded button with configurable visual styles, supporting progress indication and various layout adaptations.\n *\n * ## Features\n * - **Variants:**\n *   - `normal` (default): Standard appearance for most use cases.\n *   - `raised`: Adds elevation/shadow for prominence.\n *   - `flat`: Minimal, backgroundless style for subtle actions.\n *   - `integration`: For use in Integration Bar components\n * - **Progress Indicator:**\n *   - Shows a circular progress spinner overlay when the `progress` property is set (0–100). Useful for indicating loading or ongoing actions.\n * - **Label Support:**\n *   - Optionally displays a text label below the icon when `hasLabel` is true and content is provided in the `label` slot.\n * - **Corner Alignment:**\n *   - `cornerLeft` and `cornerRight` adjust the button's border radius and alignment for seamless placement at the start or end of a container.\n * - **Active State:**\n *   - `activated` visually highlights the button as selected or toggled.\n *   - `activeColor` applies an accent color for emphasis.\n * - **Wide Mode:**\n *   - `wide` increases the button's width for easier touch targets or visual balance.\n * - **Disabled State:**\n *   - `disabled` prevents interaction and visually dims the button.\n *\n * ## Usage Guidelines\n * - Use `obc-icon-button` for actions represented by icons, such as toolbars, navigation, or quick-access commands.\n * - Add a label (with `hasLabel` and the `label` slot) when clarity is needed or when icons alone may not be universally understood.\n * - Use the progress indicator for actions that take time, such as uploads or background processes.\n * - Prefer the `normal` variant for most cases; use `raised` to draw attention, and `flat` for less prominent or inline actions.\n * - For grouped or edge-aligned layouts, use `cornerLeft` or `cornerRight` to visually merge with container edges.\n * - Avoid using icon buttons for destructive or critical actions unless paired with clear feedback.\n * - **TODO(designer):** Clarify recommended icon sizes and when to use label vs. icon-only.\n *\n * ## Slots\n * | Slot Name | Renders When...      | Purpose                                      |\n * |-----------|---------------------|----------------------------------------------|\n * | (default) | Always              | The icon to display (e.g., `<obi-search>`)   |\n * | label     | If `hasLabel` is set | Optional label text below the icon           |\n *\n * ## Events\n * - Emits a standard `click` event (`onClick` handler in framework wrappers) when activated.\n *\n * ## Best Practices\n * - Ensure icons are clear and universally recognizable.\n * - For accessibility, provide an `aria-label` or descriptive label for the button's action.\n * - When using the progress indicator, avoid showing it for very short actions to prevent visual flicker.\n *\n * ## Example:\n * ```\n * <obc-icon-button variant=\"normal\">\n *   <obi-search></obi-search>\n * </obc-icon-button>\n *\n * <obc-icon-button variant=\"normal\" hasLabel>\n *   <obi-arrow></obi-arrow>\n *   <span slot=\"label\">Next</span>\n * </obc-icon-button>\n * ```\n *\n * @slot - Icon slot (default): Place an icon such as <obi-search> here.\n * @slot label - Optional label shown below the icon when `hasLabel` is true.\n * @fires click - Fired when the button is clicked (if not disabled).\n */\n@customElement('obc-icon-button')\nexport class ObcIconButton extends LitElement {\n  /**\n   * Visual style of the button.\n   * - `normal`: Standard appearance (default).\n   * - `raised`: Elevated with shadow.\n   * - `flat`: Minimal, backgroundless style.\n   */\n  @property({type: String}) variant: IconButtonVariant =\n    IconButtonVariant.normal;\n\n  /**\n   * Whether the button is in an activated (selected/toggled) state.\n   * Visually highlights the button to indicate selection.\n   */\n  @property({type: Boolean}) activated = false;\n\n  /**\n   * If true, aligns the button to the left edge and removes left border radius.\n   * Useful for grouping or edge-aligned layouts.\n   */\n  @property({type: Boolean}) cornerLeft = false;\n\n  /**\n   * If true, aligns the button to the right edge and removes right border radius.\n   * Useful for grouping or edge-aligned layouts.\n   */\n  @property({type: Boolean}) cornerRight = false;\n\n  /**\n   * Applies an accent color to the button for emphasis.\n   * Used to visually distinguish active or important actions.\n   */\n  @property({type: Boolean}) activeColor = false;\n\n  /**\n   * Increases the button's width for larger touch targets or visual balance.\n   */\n  @property({type: Boolean}) wide = false;\n\n  /**\n   * Disables the button, preventing user interaction and dimming its appearance.\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * Shows a circular progress indicator overlay when set (0–100).\n   * Use to indicate ongoing actions or loading states.\n   * If undefined, no progress indicator is shown.\n   */\n  @property({type: Number}) progress: undefined | number = undefined;\n\n  /**\n   * If true, displays a label below the icon using the `label` slot.\n   */\n  @property({type: Boolean}) hasLabel: boolean = false;\n\n  /** If false, and cornerLeft or cornerRight is true, the divider is not shown. */\n  @property({type: Boolean, attribute: false}) showDivider = true;\n\n  get progressSpinner() {\n    if (this.progress === undefined) {\n      return nothing;\n    }\n    if (this.progress === 100) {\n      return html`<div class=\"progress-spinner\">\n        <svg\n          width=\"40\"\n          height=\"40\"\n          viewBox=\"0 0 40 40\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"20\"\n            cy=\"20\"\n            r=\"18\"\n            stroke=\"#325B9A\"\n            stroke-width=\"4\"\n            fill=\"none\"\n          />\n        </svg>\n      </div>`;\n    }\n    const angleRad = (this.progress * 0.95 * 3.6 * Math.PI) / 180;\n    const x = 20 + 18 * Math.sin(angleRad);\n    const y = 20 - 18 * Math.cos(angleRad);\n    const largeArcFlag = angleRad > Math.PI ? 1 : 0;\n    return html`<div class=\"progress-spinner\">\n      <svg\n        width=\"40\"\n        height=\"40\"\n        viewBox=\"0 0 40 40\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle\n          cx=\"20\"\n          cy=\"20\"\n          r=\"18\"\n          stroke=\"var(--container-backdrop-color)\"\n          stroke-width=\"4\"\n          fill=\"none\"\n        />\n        <path\n          d=\"M18 2 A18 18 0 ${largeArcFlag} 1 ${x} ${y}\"\n          stroke=\"var(--instrument-enhanced-secondary-color)\"\n          stroke-width=\"4\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>`;\n  }\n\n  override render() {\n    return html`\n      <button\n        class=${classMap({\n          wrapper: true,\n          ['variant-' + this.variant]: true,\n          activated: this.activated,\n          'corner-left': this.cornerLeft,\n          'corner-right': this.cornerRight,\n          'active-color': this.activeColor,\n          'has-label': this.hasLabel,\n          wide: this.wide,\n          progress: this.progress !== undefined,\n          'hide-divider': !this.showDivider,\n        })}\n        ?disabled=${this.disabled}\n        part=\"wrapper\"\n      >\n        ${this.progress !== undefined ? this.progressSpinner : nothing}\n        <div class=\"visible-wrapper\" part=\"visible-wrapper\">\n          <div class=\"icon\" part=\"icon\">\n            <slot></slot>\n          </div>\n        </div>\n        ${this.hasLabel\n          ? html`<div class=\"label\" part=\"label\">\n              <slot name=\"label\"></slot>\n            </div>`\n          : nothing}\n      </button>\n    `;\n  }\n\n  static override styles = unsafeCSS(iconStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-icon-button': ObcIconButton;\n  }\n}\n"],"names":["IconButtonVariant"],"mappings":"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"}

package/dist/integration-systems/integration-bar/integration-bar.css.js

@@ -0,0 +1,97 @@
+import { css } from "lit";
+const compentStyle = css`
+          * {
+            -webkit-tap-highlight-color: transparent;
+          }
+
+* {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.wrapper {
+  display: flex;
+  padding: 0 var(--app-components-integration-system-topbar-margin-global);
+  justify-content: space-between;
+  align-items: center;
+  background: var(--integration-container-global-color);
+  box-shadow: var(--shadow-flat-x) var(--shadow-flat-y) var(--shadow-flat-blur)
+    var(--shadow-flat-spread) var(--shadow-flat-color);
+}
+
+.content-container {
+  display: flex;
+  flex: 1;
+}
+
+.fleet-vessel-container {
+  display: flex;
+  align-items: flex-start;
+  flex: 1 1 auto;
+}
+
+.fleet-button {
+  flex: initial;
+}
+
+.vessel-container {
+  display: flex;
+  flex: 1 1 auto;
+}
+
+.integration-buttons-slot::slotted(obc-integration-button) {
+  flex: 1;
+}
+
+.hug-buttons-slot::slotted(obc-integration-button) {
+  flex: 0 1 auto;
+}
+
+.home-button,
+.link-button {
+  width: var(--app-components-integration-system-icon-button-touch-target);
+  height: var(--app-components-integration-system-icon-button-touch-target);
+  justify-content: center;
+  align-items: center;
+  gap: 14px;
+  flex: initial;
+}
+
+.right-content-container {
+  display: flex;
+  align-self: stretch;
+  align-items: center;
+  flex: initial;
+}
+
+.right-content-container.buttons-on-bar {
+  border-left: var(
+      --app-components-integration-system-navigation-item-horizontal-stroke-weight-right,
+      1px
+    )
+    solid
+    var(
+      --integration-beta-flat-enabled-border-color,
+      var(--integration-border-outline)
+    );
+}
+
+.right-side-system-menu-container {
+  position: absolute;
+  position-anchor: --settings-menu-anchor;
+  top: anchor(bottom);
+  justify-self: anchor-center;
+}
+
+.vessel-button-placeholder {
+  flex: 1 1 auto;
+}
+`;
+export {
+  compentStyle as default
+};
+//# sourceMappingURL=integration-bar.css.js.map

package/dist/integration-systems/integration-bar/integration-bar.css.js.map

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

package/dist/integration-systems/integration-bar/integration-bar.d.ts

@@ -0,0 +1,91 @@
+import { LitElement } from 'lit';
+import '../integration-tabs/integration-tabs.js';
+import '../integration-button/integration-button.js';
+import '../../components/clock/clock.js';
+import '../../components/icon-button/icon-button.js';
+import '../../icons/icon-palette-day-night-iec.js';
+import '../../icons/icon-user.js';
+import '../../icons/icon-configure.js';
+import '../../icons/icon-notification.js';
+import '../../icons/icon-home.js';
+import '../../icons/icon-ship.js';
+import '../../icons/icon-screen-desk.js';
+import '../../icons/icon-alerts.js';
+import '../../icons/icon-link.js';
+/**
+ * `<obc-integration-bar>` – A compact top-level integration header for vessel and system navigation controls.
+ *
+ * Provides a configurable integration bar with home/navigation controls, optional fleet and vessel selection,
+ * and optional utility actions such as alerts, notifications, screen, system, dimming, user, and clock.
+ *
+ * @slot clock - Custom clock content, rendered when `showClock` is true
+ * @slot integration-buttons - Regular vessel integration buttons
+ * @slot hug-buttons - Compact vessel integration buttons; slotted integration buttons are forced to hug type
+ * @slot vessel-integration-menu - Modal that will appear achored below the fleet/vessel button. Typically an obc-integration-vessel-menu
+ * @property {IntegrationBarType} type - Integration bar mode for fleet/vessel presentation
+ * @property {boolean} hideHomeButton - Hides the home button when true
+ * @property {boolean} showClock - Toggles rendering of the clock slot
+ * @property {boolean} showLinkButton - Toggles visibility of link button
+ * @property {boolean} linkButtonActivated - Activated state of link button
+ * @property {boolean} showUserButton - Toggles visibility of user button
+ * @property {boolean} userButtonActivated - Activated state of user button
+ * @property {boolean} showDimmingButton - Toggles visibility of dimming button
+ * @property {boolean} dimmingButtonActivated - Activated state of dimming button
+ * @property {boolean} showSystemButton - Toggles visibility of system button
+ * @property {boolean} systemButtonActivated - Activated state of system button
+ * @property {boolean} showScreenButton - Toggles visibility of screen button
+ * @property {boolean} screenButtonActivated - Activated state of screen button
+ * @property {boolean} showNotificationButton - Toggles visibility of notification button
+ * @property {boolean} notificationButtonActivated - Activated state of notification button
+ * @property {boolean} showAlertButton - Toggles visibility of alert button
+ * @property {boolean} alertButtonActivated - Activated state of alert button
+ * @property {boolean} showFleetButton - Toggles visibility of fleet button
+ * @property {boolean} fleetButtonSelected - Selected state of fleet button
+ * @property {boolean} fleetButtonActivated - Active state of fleet button while selection is pending
+ * @property {string} fleetButtonLabel - Label for the fleet button
+ * @property {string} selectedVesselValue - Selected vessel value
+ * @property {string} activeVesselValue - Active vessel value while selection is pending
+ * @property {{value: string; label: string}[]} vesselSelectorOptions - Available vessel options
+ * @fires fleet-button-click - Fired when the fleet button is clicked
+ * @fires link-button-clicked - Fired when the link button is clicked
+ * @fires alert-button-clicked - Fired when the alert button is clicked
+ * @fires notification-button-clicked - Fired when the notification button is clicked
+ * @fires screen-button-clicked - Fired when the screen button is clicked
+ * @fires system-button-clicked - Fired when the system button is clicked
+ * @fires dimming-button-clicked - Fired when the dimming button is clicked
+ * @fires user-button-clicked - Fired when the user button is clicked
+ */
+export declare class ObcIntegrationBar extends LitElement {
+    hideHomeButton: boolean;
+    showClock: boolean;
+    showLinkButton: boolean;
+    linkButtonActivated: boolean;
+    showUserButton: boolean;
+    userButtonActivated: boolean;
+    showDimmingButton: boolean;
+    dimmingButtonActivated: boolean;
+    showSystemButton: boolean;
+    systemButtonActivated: boolean;
+    showScreenButton: boolean;
+    screenButtonActivated: boolean;
+    showNotificationButton: boolean;
+    notificationButtonActivated: boolean;
+    showAlertButton: boolean;
+    alertButtonActivated: boolean;
+    showFleetButton: boolean;
+    fleetButtonSelected: boolean;
+    fleetButtonActivated: boolean;
+    fleetButtonLabel: string;
+    private buttonsOnBar;
+    private onFleetButtonClick;
+    private onHugButtonsSlotChange;
+    private onButtonsSlotChange;
+    render(): import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-integration-bar': ObcIntegrationBar;
+    }
+}
+//# sourceMappingURL=integration-bar.d.ts.map

package/dist/integration-systems/integration-bar/integration-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"integration-bar.d.ts","sourceRoot":"","sources":["../../../src/integration-systems/integration-bar/integration-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAGzD,OAAO,yCAAyC,CAAC;AACjD,OAAO,6CAA6C,CAAC;AAKrD,OAAO,iCAAiC,CAAC;AACzC,OAAO,6CAA6C,CAAC;AACrD,OAAO,2CAA2C,CAAC;AACnD,OAAO,0BAA0B,CAAC;AAClC,OAAO,+BAA+B,CAAC;AACvC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,iCAAiC,CAAC;AACzC,OAAO,4BAA4B,CAAC;AACpC,OAAO,0BAA0B,CAAC;AAIlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IACpB,cAAc,UAAS;IACvB,SAAS,UAAS;IAClB,cAAc,UAAS;IACvB,mBAAmB,UAAS;IAC5B,cAAc,UAAS;IACvB,mBAAmB,UAAS;IAC5B,iBAAiB,UAAS;IAC1B,sBAAsB,UAAS;IAC/B,gBAAgB,UAAS;IACzB,qBAAqB,UAAS;IAC9B,gBAAgB,UAAS;IACzB,qBAAqB,UAAS;IAC9B,sBAAsB,UAAS;IAC/B,2BAA2B,UAAS;IACpC,eAAe,UAAS;IACxB,oBAAoB,UAAS;IAC7B,eAAe,UAAS;IACxB,mBAAmB,UAAS;IAC5B,oBAAoB,UAAS;IAC9B,gBAAgB,SAAW;IAE5C,OAAO,CAAC,YAAY,CAAS;IAEtC,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,sBAAsB;IAe9B,OAAO,CAAC,mBAAmB;IAIlB,MAAM;IAmLf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/integration-systems/integration-bar/integration-bar.js

@@ -0,0 +1,279 @@
+import { unsafeCSS, LitElement, nothing, html } from "lit";
+import { customElement } from "../../decorator.js";
+import compentStyle from "./integration-bar.css.js";
+import "../integration-tabs/integration-tabs.js";
+import { IntegrationButtonType, IntegrationButtonVariant } from "../integration-button/integration-button.js";
+import "../../components/clock/clock.js";
+import "../../components/icon-button/icon-button.js";
+import "../../icons/icon-palette-day-night-iec.js";
+import "../../icons/icon-user.js";
+import "../../icons/icon-configure.js";
+import "../../icons/icon-notification.js";
+import "../../icons/icon-home.js";
+import "../../icons/icon-ship.js";
+import "../../icons/icon-screen-desk.js";
+import "../../icons/icon-alerts.js";
+import "../../icons/icon-link.js";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let ObcIntegrationBar = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.hideHomeButton = false;
+    this.showClock = false;
+    this.showLinkButton = false;
+    this.linkButtonActivated = false;
+    this.showUserButton = false;
+    this.userButtonActivated = false;
+    this.showDimmingButton = false;
+    this.dimmingButtonActivated = false;
+    this.showSystemButton = false;
+    this.systemButtonActivated = false;
+    this.showScreenButton = false;
+    this.screenButtonActivated = false;
+    this.showNotificationButton = false;
+    this.notificationButtonActivated = false;
+    this.showAlertButton = false;
+    this.alertButtonActivated = false;
+    this.showFleetButton = false;
+    this.fleetButtonSelected = false;
+    this.fleetButtonActivated = false;
+    this.fleetButtonLabel = "Fleet";
+    this.buttonsOnBar = false;
+  }
+  onFleetButtonClick() {
+    this.dispatchEvent(new CustomEvent("fleet-button-click"));
+  }
+  onHugButtonsSlotChange(event) {
+    const slot = event.currentTarget;
+    const assignedElements = slot.assignedElements({ flatten: true });
+    assignedElements.forEach((element) => {
+      if (element.tagName === "OBC-INTEGRATION-BUTTON") {
+        const integrationButton = element;
+        integrationButton.type = IntegrationButtonType.hug;
+      }
+    });
+    this.buttonsOnBar = true;
+  }
+  onButtonsSlotChange() {
+    this.buttonsOnBar = true;
+  }
+  render() {
+    const isFleetButtonAnchored = this.fleetButtonActivated;
+    return html`
+      <nav class="wrapper">
+        <div class="content-container">
+          ${!this.hideHomeButton ? html`<obc-icon-button class="home-button" variant="integration">
+                <obi-home></obi-home>
+              </obc-icon-button>` : null}
+          ${this.showLinkButton ? html`<obc-icon-button
+                class=${classMap({
+      "link-button": true,
+      activated: this.linkButtonActivated
+    })}
+                part="link-button"
+                variant="integration"
+                @click=${() => this.dispatchEvent(new CustomEvent("link-button-clicked"))}
+                ?activated=${this.linkButtonActivated}
+              >
+                <obi-link></obi-link>
+              </obc-icon-button>` : null}
+          <div class=${classMap({ "fleet-vessel-container": true })}>
+            ${this.showFleetButton ? html`<obc-integration-button
+                  class="fleet-button"
+                  .variant=${IntegrationButtonVariant.normal}
+                  ?selected=${this.fleetButtonSelected}
+                  ?activated=${this.fleetButtonActivated}
+                  style=${isFleetButtonAnchored ? "anchor-name: --integration-menu-anchor;" : ""}
+                  @click=${() => this.onFleetButtonClick()}
+                >
+                  <span slot="label">${this.fleetButtonLabel}</span>
+                </obc-integration-button>` : nothing}
+            <div class="vessel-container">
+              ${this.buttonsOnBar ? nothing : html`<div class="vessel-button-placeholder"></div>`}
+              <slot
+                class="hug-buttons-slot"
+                name="hug-buttons"
+                @slotchange=${this.onHugButtonsSlotChange}
+              ></slot>
+              <slot
+                class="integration-buttons-slot"
+                name="integration-buttons"
+                @slotchange=${this.onButtonsSlotChange}
+              ></slot>
+            </div>
+          </div>
+        </div>
+        <div
+          class=${classMap({
+      "buttons-on-bar": this.buttonsOnBar,
+      "right-content-container": true
+    })}
+        >
+          ${this.showAlertButton ? html`<obc-icon-button
+                class=${classMap({
+      "alert-button": true,
+      activated: this.alertButtonActivated
+    })}
+                part="alert-button"
+                variant="integration"
+                style=${this.alertButtonActivated ? "anchor-name: --settings-menu-anchor;" : ""}
+                @click=${() => this.dispatchEvent(new CustomEvent("alert-button-clicked"))}
+                ?activated=${this.alertButtonActivated}
+              >
+                <obi-alerts></obi-alerts>
+              </obc-icon-button>` : null}
+          ${this.showNotificationButton ? html`<obc-icon-button
+                class=${classMap({
+      "notification-button": true,
+      activated: this.notificationButtonActivated
+    })}
+                part="notification-button"
+                variant="integration"
+                style=${this.notificationButtonActivated ? "anchor-name: --settings-menu-anchor;" : ""}
+                @click=${() => this.dispatchEvent(
+      new CustomEvent("notification-button-clicked")
+    )}
+                ?activated=${this.notificationButtonActivated}
+              >
+                <obi-notification></obi-notification>
+              </obc-icon-button>` : null}
+          ${this.showScreenButton ? html`<obc-icon-button
+                class=${classMap({
+      "screen-button": true,
+      activated: this.screenButtonActivated
+    })}
+                part="screen-button"
+                variant="integration"
+                style=${this.screenButtonActivated ? "anchor-name: --settings-menu-anchor;" : ""}
+                @click=${() => this.dispatchEvent(new CustomEvent("screen-button-clicked"))}
+                ?activated=${this.screenButtonActivated}
+              >
+                <obi-screen-desk></obi-screen-desk>
+              </obc-icon-button>` : null}
+          ${this.showSystemButton ? html`<obc-icon-button
+                class=${classMap({
+      "system-button": true,
+      activated: this.systemButtonActivated
+    })}
+                part="system-button"
+                variant="integration"
+                style=${this.systemButtonActivated ? "anchor-name: --settings-menu-anchor;" : ""}
+                @click=${() => this.dispatchEvent(new CustomEvent("system-button-clicked"))}
+                ?activated=${this.systemButtonActivated}
+              >
+                <obi-configure></obi-configure>
+              </obc-icon-button>` : null}
+          ${this.showDimmingButton ? html`<obc-icon-button
+                class=${classMap({
+      "dimming-button": true,
+      activated: this.dimmingButtonActivated
+    })}
+                part="dimming-button"
+                variant="integration"
+                style=${this.dimmingButtonActivated ? "anchor-name: --settings-menu-anchor;" : ""}
+                @click=${() => this.dispatchEvent(new CustomEvent("dimming-button-clicked"))}
+                ?activated=${this.dimmingButtonActivated}
+              >
+                <obi-palette-day-night-iec></obi-palette-day-night-iec>
+              </obc-icon-button>` : null}
+          ${this.showUserButton ? html`<obc-icon-button
+                class=${classMap({
+      "user-button": true,
+      activated: this.userButtonActivated
+    })}
+                part="user-button"
+                variant="integration"
+                style=${this.userButtonActivated ? "anchor-name: --settings-menu-anchor;" : ""}
+                @click=${() => this.dispatchEvent(new CustomEvent("user-button-clicked"))}
+                ?activated=${this.userButtonActivated}
+              >
+                <obi-user></obi-user>
+              </obc-icon-button>` : null}
+          ${this.showClock ? html`<slot name="clock"></slot>` : null}
+        </div>
+      </nav>
+    `;
+  }
+};
+ObcIntegrationBar.styles = unsafeCSS(compentStyle);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "hideHomeButton", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "showClock", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "showLinkButton", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "linkButtonActivated", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "showUserButton", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "userButtonActivated", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "showDimmingButton", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "dimmingButtonActivated", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "showSystemButton", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "systemButtonActivated", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "showScreenButton", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "screenButtonActivated", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "showNotificationButton", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "notificationButtonActivated", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "showAlertButton", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "alertButtonActivated", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "showFleetButton", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "fleetButtonSelected", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "fleetButtonActivated", 2);
+__decorateClass([
+  property({ type: String })
+], ObcIntegrationBar.prototype, "fleetButtonLabel", 2);
+__decorateClass([
+  state()
+], ObcIntegrationBar.prototype, "buttonsOnBar", 2);
+ObcIntegrationBar = __decorateClass([
+  customElement("obc-integration-bar")
+], ObcIntegrationBar);
+export {
+  ObcIntegrationBar
+};
+//# sourceMappingURL=integration-bar.js.map