@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.61 → 2.0.0-next.63

package/dist/integration-systems/integration-vessel-menu/integration-vessel-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"integration-vessel-menu.js","sources":["../../../src/integration-systems/integration-vessel-menu/integration-vessel-menu.ts"],"sourcesContent":["import {LitElement, html, 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 './integration-vessel-menu.css?inline';\n\nimport '../../components/button/button.js';\nimport '../../components/icon-button/icon-button.js';\nimport '../../icons/icon-placeholder.js';\nimport '../../building-blocks/alert-list/alert-list.js';\n\n/**\n * `<obc-integration-vessel-menu>` – A menu to be shown when selecting a obc-integration-button from a obc-integration-bar.\n *\n * @slot leading-icon - Icon shown in the header.\n * @slot title - Header title text.\n * @slot button-1-leading-icon - Leading icon for the first button.\n * @slot button-1-label - Label for the first button.\n * @slot button-2-leading-icon - Leading icon for the second button.\n * @slot button-2-label - Label for the second button.\n * @slot button-3-leading-icon - Leading icon for the third button.\n * @slot button-3-label - Label for the third button.\n * @slot content - Main content shown in the content area.\n * @slot alarms - Alarm items rendered inside the alert list.\n *\n * @property {number} numberOfButtons - Number of buttons to render (up to 3).\n *\n * @fires button1-click - Fired when the first button is clicked.\n * @fires button2-click - Fired when the second button is clicked.\n * @fires button3-click - Fired when the third button is clicked.\n */\n\n@customElement('obc-integration-vessel-menu')\nexport class ObcIntegrationVesselMenu extends LitElement {\n  @property({type: Number}) numberOfButtons = 3;\n\n  private renderButtons() {\n    return html`${Array.from({length: this.numberOfButtons}, (_, i) => {\n      const buttonNum = i + 1;\n      return html`<obc-button\n        @click=${() =>\n          this.dispatchEvent(new CustomEvent(`button${buttonNum}-click`))}\n        ?showLeadingIcon=${true}\n        ?fullWidth=${true}\n        class=\"button\"\n      >\n        <slot\n          name=\"button-${buttonNum}-leading-icon\"\n          slot=\"leading-icon\"\n        ></slot>\n        <slot name=\"button-${buttonNum}-label\"></slot>\n      </obc-button>`;\n    })}`;\n  }\n\n  protected override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n        })}\n      >\n        <div class=\"footer-container\">${this.renderButtons()}</div>\n        <div class=\"content-area\">\n          <slot name=\"content\"></slot>\n        </div>\n        <div class=\"content-container\">\n          <obc-alert-list class=\"alert-list\"\n            ><slot name=\"alarms\"> </slot>\n          </obc-alert-list>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-integration-vessel-menu': ObcIntegrationVesselMenu;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAiCO,IAAM,2BAAN,cAAuC,WAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,kBAAkB;AAAA,EAAA;AAAA,EAEpC,gBAAgB;AACtB,WAAO,OAAO,MAAM,KAAK,EAAC,QAAQ,KAAK,gBAAA,GAAkB,CAAC,GAAG,MAAM;AACjE,YAAM,YAAY,IAAI;AACtB,aAAO;AAAA,iBACI,MACP,KAAK,cAAc,IAAI,YAAY,SAAS,SAAS,QAAQ,CAAC,CAAC;AAAA,2BAC9C,IAAI;AAAA,qBACV,IAAI;AAAA;AAAA;AAAA;AAAA,yBAIA,SAAS;AAAA;AAAA;AAAA,6BAGL,SAAS;AAAA;AAAA,IAElC,CAAC,CAAC;AAAA,EACJ;AAAA,EAEmB,SAAS;AAC1B,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS;AAAA,IAAA,CACV,CAAC;AAAA;AAAA,wCAE8B,KAAK,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAW1D;AAGF;AA3Ca,yBA0CK,SAAS,UAAU,cAAc;AAzCvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,yBACe,WAAA,mBAAA,CAAA;AADf,2BAAN,gBAAA;AAAA,EADN,cAAc,6BAA6B;AAAA,GAC/B,wBAAA;"}
+{"version":3,"file":"integration-vessel-menu.js","sources":["../../../src/integration-systems/integration-vessel-menu/integration-vessel-menu.ts"],"sourcesContent":["import {LitElement, html, 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 './integration-vessel-menu.css?inline';\n\nimport '../../components/button/button.js';\nimport '../../components/icon-button/icon-button.js';\nimport '../../icons/icon-placeholder.js';\nimport '../../building-blocks/alert-list/alert-list.js';\n\n/**\n * `<obc-integration-vessel-menu>` – A menu to be shown when selecting a obc-integration-button from a obc-integration-bar.\n *\n * @slot buttons - Buttons shown in the footer.\n * @slot content - Main content shown in the content area.\n * @slot alarms - Alarm items rendered inside the alert list.\n */\n\n@customElement('obc-integration-vessel-menu')\nexport class ObcIntegrationVesselMenu extends LitElement {\n  /** Hide the alarm list, ensuring it doesn't take space (display: none). */\n  @property({type: Boolean}) hideAlarmList = false;\n\n  protected override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n        })}\n      >\n        <div class=\"footer-container\">\n          <slot name=\"buttons\" class=\"buttons-slot\"></slot>\n        </div>\n        <div class=\"content-area\">\n          <slot name=\"content\"></slot>\n        </div>\n        <div\n          class=${classMap({\n            'content-container': true,\n            hidealarmlist: this.hideAlarmList,\n          })}\n        >\n          <obc-alert-list class=\"alertlist\"\n            ><slot name=\"alarms\"></slot>\n          </obc-alert-list>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-integration-vessel-menu': ObcIntegrationVesselMenu;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAoBO,IAAM,2BAAN,cAAuC,WAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA;AAEsB,SAAA,gBAAgB;AAAA,EAAA;AAAA,EAExB,SAAS;AAC1B,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS;AAAA,IAAA,CACV,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBASQ,SAAS;AAAA,MACf,qBAAqB;AAAA,MACrB,eAAe,KAAK;AAAA,IAAA,CACrB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQV;AAGF;AAhCa,yBA+BK,SAAS,UAAU,cAAc;AA7BtB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAFd,yBAEgB,WAAA,iBAAA,CAAA;AAFhB,2BAAN,gBAAA;AAAA,EADN,cAAc,6BAA6B;AAAA,GAC/B,wBAAA;"}

package/dist/openbridge.css

@@ -2711,8 +2711,10 @@
   --pui-components-border-radius-button: 6px;
   --pui-components-border-radius-cutout: 7px;
   --pui-components-line-thickness-min: 1px;
-  --pui-components-button-container-height: 56px;
+  --pui-components-button-button-size-min: 48px;
   --pui-components-indicator-container-height: 24px;
+  --pui-components-button-button-size: 52px;
+  --pui-components-indicator-container-padding-vertical: 4px;
 }
 .obc-component-size-medium {
   --global-size-spacing-touch-target-min: 56px;
@@ -5344,8 +5346,10 @@
   --pui-components-border-radius-button: 8px;
   --pui-components-border-radius-cutout: 10px;
   --pui-components-line-thickness-min: 2px;
-  --pui-components-button-container-height: 56px;
+  --pui-components-button-button-size-min: 56px;
   --pui-components-indicator-container-height: 32px;
+  --pui-components-button-button-size: 56px;
+  --pui-components-indicator-container-padding-vertical: 4px;
 }
 .obc-component-size-large {
   --global-size-spacing-touch-target-min: 72px;
@@ -7967,8 +7971,10 @@
   --pui-components-border-radius-button: 12px;
   --pui-components-border-radius-cutout: 14px;
   --pui-components-line-thickness-min: 2px;
-  --pui-components-button-container-height: 72px;
+  --pui-components-button-button-size-min: 72px;
   --pui-components-indicator-container-height: 32px;
+  --pui-components-button-button-size: 72px;
+  --pui-components-indicator-container-padding-vertical: 32px;
 }
 .obc-component-size-xl {
   --global-size-spacing-touch-target-min: 96px;
@@ -10608,58 +10614,12 @@
   --pui-components-border-radius-button: 16px;
   --pui-components-border-radius-cutout: 18px;
   --pui-components-line-thickness-min: 2px;
-  --pui-components-button-container-height: 96px;
+  --pui-components-button-button-size-min: 96px;
   --pui-components-indicator-container-height: 48px;
+  --pui-components-button-button-size: 96px;
+  --pui-components-indicator-container-padding-vertical: 48px;
 }
 * {
-  --typography-primitives-font-family-main: "Noto Sans";
-  --typography-primitives-font-size-071: 11.5px;
-  --typography-primitives-font-size-100: 16px;
-  --typography-primitives-font-size-150: 23px;
-  --typography-primitives-font-size-200: 34px;
-  --typography-primitives-font-size-250: 39px;
-  --typography-primitives-font-size-300: 45px;
-  --typography-primitives-font-size-350: 57px;
-  --typography-primitives-font-size-400: 68px;
-  --typography-primitives-font-size-450: 73px;
-  --typography-primitives-font-size-500: 78px;
-  --typography-primitives-line-height-071: 16px;
-  --typography-primitives-line-height-100: 20px;
-  --typography-primitives-line-height-150: 24px;
-  --typography-primitives-line-height-200: 32px;
-  --typography-primitives-line-height-250: 36px;
-  --typography-primitives-line-height-300: 48px;
-  --typography-primitives-line-height-350: 36px;
-  --typography-primitives-line-height-400: 64px;
-  --typography-primitives-line-height-450: 68px;
-  --typography-primitives-line-height-500: 72px;
-  --typography-primitives-font-weight-300: 370;
-  --typography-primitives-font-weight-500: 570;
-  --typography-primitives-font-weight-600: 670;
-  --typography-primitives-font-weight-200: 270;
-  --typography-primitives-font-weight-400: 470;
-  --typography-primitives-baseline-offset-071: 0px;
-  --typography-primitives-baseline-offset-100: 0px;
-  --typography-primitives-baseline-offset-150: 2px;
-  --typography-primitives-baseline-offset-200: 2px;
-  --typography-primitives-baseline-offset-250: 2px;
-  --typography-primitives-baseline-offset-300: 2px;
-  --typography-primitives-baseline-offset-350: 4px;
-  --typography-primitives-baseline-offset-400: 4px;
-  --typography-primitives-baseline-offset-450: 4px;
-  --typography-primitives-baseline-offset-500: 4px;
-  --typography-primitives-letter-spacing-071: 0px;
-  --typography-primitives-letter-spacing-100: 0px;
-  --typography-primitives-letter-spacing-150: 0px;
-  --typography-primitives-letter-spacing-200: 0.0024999999441206455px;
-  --typography-primitives-letter-spacing-250: -0.5px;
-  --typography-primitives-letter-spacing-300: -0.5px;
-  --typography-primitives-letter-spacing-350: -0.5px;
-  --typography-primitives-letter-spacing-400: -1px;
-  --typography-primitives-letter-spacing-450: -1px;
-  --typography-primitives-letter-spacing-500: -1px;
-  --weight-demo: "470";
-  --weight-demo-2: 470px;
   --font-size-075: 12px;
   --font-size-100: 16px;
   --font-size-150: 24px;
@@ -10902,6 +10862,103 @@
   --border-radius-br-12: 12px;
   --border-radius-br-16: 16px;
   --border-radius-br-24: 24px;
+  --advice-indicator-padding: var(
+    --instrument-components-advice-indicator-padding-indicator-padding-regular
+  );
+  --watchface-label-container-width: var(
+    --instrument-components-watchface-label-container-size-1
+  );
+  --scale-margin: var(--instrument-components-watchface-scale-margin-regular);
+  --scale-padding: var(--instrument-components-watchface-scale-padding-regular);
+  --scale-size: var(--instrument-components-watchface-scale-size-regular);
+  --tick-mark-main: var(
+    --instrument-components-watchface-tick-marks-length-main-regular
+  );
+  --tick-mark-primary: var(
+    --instrument-components-watchface-tick-marks-length-primary-regular
+  );
+  --tick-mark-secondary: var(
+    --instrument-components-watchface-tick-marks-length-secondary-regular
+  );
+  --tick-mark-tertiary: var(
+    --instrument-components-watchface-tick-marks-length-tertiary-regular
+  );
+  --frame-thickness: var(
+    --instrument-components-watchface-frame-regular-thickness
+  );
+  --frame-outer-margin: var(
+    --instrument-components-watchface-frame-regular-outer-margin
+  );
+  --frame-border-radius: var(
+    --instrument-components-watchface-frame-regular-border-radius
+  );
+  --frame-double-thickness: var(
+    --instrument-components-watchface-frame-regular-double-thickness
+  );
+  --frame-track-size: var(
+    --instrument-components-watchface-frame-regular-track-size
+  );
+  --typography-font-weight-regular: var(--day-typography-font-weight-regular);
+  --watchface-label-margin-size: var(
+    --instrument-components-watchface-label-margin-size-1
+  );
+  --tick-mark-main-visibility: var(
+    --instrument-components-watchface-tick-marks-visibility-main-regular
+  );
+  --tick-mark-primary-visibility: var(
+    --instrument-components-watchface-tick-marks-visibility-primary-regular
+  );
+  --tick-mark-secondary-visibility: var(
+    --instrument-components-watchface-tick-marks-visibility-secondary-regular
+  );
+  --tick-mark-tertiary-visibility: var(
+    --instrument-components-watchface-tick-marks-visibility-tertiary-regular
+  );
+  --advice-indicator-visibility: var(
+    --instrument-components-advice-indicator-visibility-indicator-visibility-regular
+  );
+  --scale-framed-size: var(
+    --instrument-components-watchface-scale-size-framed-regular
+  );
+  --advice-indicator-offset: var(
+    --instrument-components-advice-indicator-offset-offset-regular
+  );
+  --advice-indicator-container-size: var(
+    --instrument-components-advice-indicator-container-size-size-regular
+  );
+  --frame-track-margin: var(
+    --instrument-components-watchface-frame-regular-track-margin
+  );
+  --typography-font-weight-semibold: var(--day-typography-font-weight-semibold);
+  --typography-primitives-font-size-071: 11.5px;
+  --typography-primitives-font-weight-300: 370;
+  --typography-primitives-line-height-071: 16px;
+  --typography-primitives-baseline-offset-071: 0px;
+  --typography-primitives-letter-spacing-071: 0px;
+  --typography-primitives-font-weight-500: 570;
+  --typography-primitives-font-weight-600: 670;
+  --typography-primitives-font-size-100: 16.5px;
+  --typography-primitives-line-height-100: 20px;
+  --typography-primitives-baseline-offset-100: 0px;
+  --typography-primitives-letter-spacing-100: 0px;
+  --typography-primitives-font-size-150: 23px;
+  --typography-primitives-line-height-150: 24px;
+  --typography-primitives-baseline-offset-150: 2px;
+  --typography-primitives-letter-spacing-150: 0px;
+  --typography-primitives-font-size-200: 34px;
+  --typography-primitives-line-height-200: 32px;
+  --typography-primitives-baseline-offset-200: 2px;
+  --typography-primitives-letter-spacing-200: 0.0024999999441206455px;
+  --typography-primitives-font-size-300: 45px;
+  --typography-primitives-line-height-300: 40px;
+  --typography-primitives-baseline-offset-300: 2px;
+  --typography-primitives-letter-spacing-300: -0.5px;
+  --typography-primitives-font-size-400: 68px;
+  --typography-primitives-line-height-400: 64px;
+  --typography-primitives-baseline-offset-400: 4px;
+  --typography-primitives-letter-spacing-400: -1px;
+  --day-typography-font-weight-regular: 370;
+  --day-typography-font-weight-semibold: 570;
   --shadow-flat: var(--shadow-flat-x) var(--shadow-flat-y)
     var(--shadow-flat-blur) var(--shadow-flat-spread) var(--shadow-flat-color);
   --shadow-raised: var(--shadow-raised-x) var(--shadow-raised-y)
@@ -11764,7 +11821,7 @@
   --alert-caution-tint-color: rgb(251, 219, 1, 0.15000000596046448);
   --alert-running-tint-color: rgb(22, 155, 13, 0.11999999731779099);
   --integration-container-container: rgb(30, 30, 30);
-  --pui-beta-normal-background-color: rgb(31, 31, 31);
+  --pui-beta-opaque-cap-regular-background-color: rgb(31, 31, 31);
   --pui-beta-effect-button-highlight-color: rgb(
     255,
     255,
@@ -11772,10 +11829,10 @@
     0.10000000149011612
   );
   --pui-beta-effect-button-edge-color: rgb(255, 255, 255, 0.03999999910593033);
-  --pui-beta-normal-content-color: rgb(217, 217, 217);
-  --pui-beta-emergency-background-color: rgb(56, 21, 21);
+  --pui-beta-opaque-backlight-active-color: rgb(240, 240, 240);
+  --pui-beta-opaque-cap-emergency-background-color: rgb(56, 21, 21);
   --pui-beta-emergency-content-color: rgb(180, 180, 180);
-  --pui-beta-element-neutral-color: rgb(149, 149, 149);
+  --pui-beta-element-neutral-color: rgb(163, 163, 163);
   --pui-beta-element-active-color: rgb(217, 217, 217);
   --pui-beta-element-inactive-color: rgb(117, 117, 117);
   --pui-beta-element-symbol-color: rgb(89, 89, 89);
@@ -11814,6 +11871,46 @@
   --base-automation-enhanced-500: rgb(45, 84, 139);
   --base-automation-enhanced-600: rgb(29, 60, 103);
   --base-automation-enhanced-050-tint: rgb(10, 100, 237, 0.10999999940395355);
+  --pui-beta-translucent-backlight-regular-color: rgb(117, 117, 117);
+  --pui-beta-translucent-content-regular-color: rgb(31, 31, 31);
+  --pui-beta-translucent-backlight-alarm-color: rgb(255, 77, 71);
+  --pui-beta-opaque-backlight-alarm-color: rgb(255, 77, 71);
+  --pui-beta-translucent-content-color-enhanced: rgb(217, 217, 217);
+  --pui-beta-opaque-backlight-enhanced-color: rgb(124, 169, 233);
+  --pui-beta-opaque-backlight-running-color: rgb(57, 162, 52);
+  --pui-beta-opaque-backlight-warning-color: rgb(255, 135, 42);
+  --pui-beta-opaque-backlight-caution-color: rgb(232, 179, 0);
+  --pui-beta-opaque-backlight-neutral-color: rgb(180, 180, 180);
+  --pui-beta-translucent-backlight-warning-color: rgb(233, 103, 0);
+  --pui-beta-translucent-backlight-caution-color: rgb(232, 179, 0);
+  --pui-beta-translucent-backlight-enhanced-color: rgb(93, 143, 213);
+  --pui-beta-translucent-backlight-running-color: rgb(57, 162, 52);
+  --pui-beta-translucent-backlight-active-color: rgb(180, 180, 180);
+  --pui-beta-translucent-cap-regular-background-color: rgb(
+    255,
+    255,
+    255,
+    0.10000000149011612
+  );
+  --pui-beta-translucent-cap-regular-border-color: rgb(
+    255,
+    255,
+    255,
+    0.20000000298023224
+  );
+  --pui-beta-alert-running-color: rgb(57, 162, 52);
+  --pui-beta-alert-running-outline-color: rgb(57, 162, 52);
+  --pui-beta-alert-caution-color: rgb(232, 179, 0);
+  --pui-beta-alert-warning-color: rgb(233, 103, 0);
+  --pui-beta-alert-enhanced-color: rgb(93, 143, 213);
+  --pui-beta-element-enhanced-active-color: rgb(156, 193, 245);
+  --pui-beta-element-enhanced-neutral-color: rgb(93, 143, 213);
+  --pui-beta-border-indicator-edge-color: rgb(
+    255,
+    255,
+    255,
+    0.20999999344348907
+  );
 }
 :root[data-obc-theme="dusk"] {
   --icon-02-chevron-up: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 14.0002L7.41 15.4102L12 10.8302L16.59 15.4102L18 14.0002L12 8.00016L6 14.0002Z" fill="rgba(255, 255, 255, .550)"/></svg>');
@@ -12699,11 +12796,11 @@
   --alert-caution-tint-color: rgb(239, 185, 0, 0.10000000149011612);
   --alert-running-tint-color: rgb(25, 129, 0, 0.11999999731779099);
   --integration-container-container: rgb(0, 0, 0);
-  --pui-beta-normal-background-color: rgb(255, 255, 255);
+  --pui-beta-opaque-cap-regular-background-color: rgb(255, 255, 255);
   --pui-beta-effect-button-highlight-color: rgb(255, 255, 255);
   --pui-beta-effect-button-edge-color: rgb(255, 255, 255);
-  --pui-beta-normal-content-color: rgb(255, 255, 255);
-  --pui-beta-emergency-background-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-active-color: rgb(255, 255, 255);
+  --pui-beta-opaque-cap-emergency-background-color: rgb(255, 255, 255);
   --pui-beta-emergency-content-color: rgb(255, 255, 255);
   --pui-beta-element-neutral-color: rgb(255, 255, 255);
   --pui-beta-element-active-color: rgb(255, 255, 255);
@@ -12744,6 +12841,31 @@
   --base-automation-enhanced-500: rgb(43, 56, 73);
   --base-automation-enhanced-600: rgb(35, 46, 60);
   --base-automation-enhanced-050-tint: rgb(62, 146, 254, 0.12999999523162842);
+  --pui-beta-translucent-backlight-regular-color: rgb(255, 255, 255);
+  --pui-beta-translucent-content-regular-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-alarm-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-alarm-color: rgb(255, 255, 255);
+  --pui-beta-translucent-content-color-enhanced: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-enhanced-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-running-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-warning-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-caution-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-neutral-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-warning-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-caution-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-enhanced-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-running-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-active-color: rgb(255, 255, 255);
+  --pui-beta-translucent-cap-regular-background-color: rgb(255, 255, 255);
+  --pui-beta-translucent-cap-regular-border-color: rgb(255, 255, 255);
+  --pui-beta-alert-running-color: rgb(255, 255, 255);
+  --pui-beta-alert-running-outline-color: rgb(255, 255, 255);
+  --pui-beta-alert-caution-color: rgb(255, 255, 255);
+  --pui-beta-alert-warning-color: rgb(255, 255, 255);
+  --pui-beta-alert-enhanced-color: rgb(255, 255, 255);
+  --pui-beta-element-enhanced-active-color: rgb(255, 255, 255);
+  --pui-beta-element-enhanced-neutral-color: rgb(255, 255, 255);
+  --pui-beta-border-indicator-edge-color: rgb(255, 255, 255);
 }
 :root[data-obc-theme="night"] {
   --icon-02-chevron-up: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 14.0002L7.41 15.4102L12 10.8302L16.59 15.4102L18 14.0002L12 8.00016L6 14.0002Z" fill="rgb(51, 51, 0)"/></svg>');
@@ -13574,11 +13696,11 @@
   --alert-caution-tint-color: rgb(37, 29, 0);
   --alert-running-tint-color: rgb(0, 24, 0);
   --integration-container-container: rgb(0, 0, 0);
-  --pui-beta-normal-background-color: rgb(255, 255, 255);
+  --pui-beta-opaque-cap-regular-background-color: rgb(255, 255, 255);
   --pui-beta-effect-button-highlight-color: rgb(255, 255, 255);
   --pui-beta-effect-button-edge-color: rgb(255, 255, 255);
-  --pui-beta-normal-content-color: rgb(255, 255, 255);
-  --pui-beta-emergency-background-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-active-color: rgb(255, 255, 255);
+  --pui-beta-opaque-cap-emergency-background-color: rgb(255, 255, 255);
   --pui-beta-emergency-content-color: rgb(255, 255, 255);
   --pui-beta-element-neutral-color: rgb(255, 255, 255);
   --pui-beta-element-active-color: rgb(255, 255, 255);
@@ -13619,6 +13741,31 @@
   --base-automation-enhanced-500: rgb(23, 30, 42);
   --base-automation-enhanced-600: rgb(14, 19, 28);
   --base-automation-enhanced-050-tint: rgb(14, 19, 28);
+  --pui-beta-translucent-backlight-regular-color: rgb(255, 255, 255);
+  --pui-beta-translucent-content-regular-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-alarm-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-alarm-color: rgb(255, 255, 255);
+  --pui-beta-translucent-content-color-enhanced: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-enhanced-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-running-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-warning-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-caution-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-neutral-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-warning-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-caution-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-enhanced-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-running-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-active-color: rgb(255, 255, 255);
+  --pui-beta-translucent-cap-regular-background-color: rgb(255, 255, 255);
+  --pui-beta-translucent-cap-regular-border-color: rgb(255, 255, 255);
+  --pui-beta-alert-running-color: rgb(255, 255, 255);
+  --pui-beta-alert-running-outline-color: rgb(255, 255, 255);
+  --pui-beta-alert-caution-color: rgb(255, 255, 255);
+  --pui-beta-alert-warning-color: rgb(255, 255, 255);
+  --pui-beta-alert-enhanced-color: rgb(255, 255, 255);
+  --pui-beta-element-enhanced-active-color: rgb(255, 255, 255);
+  --pui-beta-element-enhanced-neutral-color: rgb(255, 255, 255);
+  --pui-beta-border-indicator-edge-color: rgb(255, 255, 255);
 }
 :root[data-obc-theme="bright"] {
   --icon-02-chevron-up: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 14.0002L7.41 15.4102L12 10.8302L16.59 15.4102L18 14.0002L12 8.00016L6 14.0002Z" fill="rgba(0, 0, 0, .650)"/></svg>');
@@ -14464,11 +14611,11 @@
   --alert-caution-tint-color: rgb(253, 242, 165);
   --alert-running-tint-color: rgb(6, 131, 6);
   --integration-container-container: rgb(0, 0, 0);
-  --pui-beta-normal-background-color: rgb(255, 255, 255);
+  --pui-beta-opaque-cap-regular-background-color: rgb(255, 255, 255);
   --pui-beta-effect-button-highlight-color: rgb(255, 255, 255);
   --pui-beta-effect-button-edge-color: rgb(255, 255, 255);
-  --pui-beta-normal-content-color: rgb(255, 255, 255);
-  --pui-beta-emergency-background-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-active-color: rgb(255, 255, 255);
+  --pui-beta-opaque-cap-emergency-background-color: rgb(255, 255, 255);
   --pui-beta-emergency-content-color: rgb(255, 255, 255);
   --pui-beta-element-neutral-color: rgb(255, 255, 255);
   --pui-beta-element-active-color: rgb(255, 255, 255);
@@ -14509,6 +14656,31 @@
   --base-automation-enhanced-500: rgb(45, 84, 139);
   --base-automation-enhanced-600: rgb(29, 60, 103);
   --base-automation-enhanced-050-tint: rgb(228, 238, 253);
+  --pui-beta-translucent-backlight-regular-color: rgb(255, 255, 255);
+  --pui-beta-translucent-content-regular-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-alarm-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-alarm-color: rgb(255, 255, 255);
+  --pui-beta-translucent-content-color-enhanced: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-enhanced-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-running-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-warning-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-caution-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-neutral-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-warning-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-caution-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-enhanced-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-running-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-active-color: rgb(255, 255, 255);
+  --pui-beta-translucent-cap-regular-background-color: rgb(255, 255, 255);
+  --pui-beta-translucent-cap-regular-border-color: rgb(255, 255, 255);
+  --pui-beta-alert-running-color: rgb(255, 255, 255);
+  --pui-beta-alert-running-outline-color: rgb(255, 255, 255);
+  --pui-beta-alert-caution-color: rgb(255, 255, 255);
+  --pui-beta-alert-warning-color: rgb(255, 255, 255);
+  --pui-beta-alert-enhanced-color: rgb(255, 255, 255);
+  --pui-beta-element-enhanced-active-color: rgb(255, 255, 255);
+  --pui-beta-element-enhanced-neutral-color: rgb(255, 255, 255);
+  --pui-beta-border-indicator-edge-color: rgb(255, 255, 255);
 }
 @property --alarm-blink-on {
   syntax: "<number>";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents-full-bundle",
-  "version": "2.0.0-next.61",
+  "version": "2.0.0-next.63",
   "type": "module",
   "repository": {
     "type": "git",
@@ -140,9 +140,10 @@
     "typecheck": "tsc --noEmit",
     "format": "prettier \"**/*.{cjs,html,js,json,md,ts,css}\"  --write",
     "format:check": "prettier \"**/*.{cjs,html,js,json,md,ts,css}\"  --check",
-    "lint": "npm run lint:mixins && npm run lint:variables && npm run lint:lit-analyzer && npm run lint:eslint",
+    "lint": "npm run lint:mixins && npm run lint:variables && npm run lint:icons && npm run lint:lit-analyzer && npm run lint:eslint",
     "lint:mixins": "tsx ./script/check-css-mixins.ts",
     "lint:variables": "tsx ./script/check-css-variables.ts",
+    "lint:icons": "tsx ./script/check-icon-hex-leaks.ts",
     "lint:eslint": "eslint 'src/**/*.ts'",
     "lint:lit-analyzer": "lit-analyzer --strict --maxWarnings 0",
     "fix-imports": "node fix-imports.mjs",

package/script/check-css-variables.ts

@@ -11,7 +11,7 @@
  * - Identifies unique variable usages and their locations (including fallback detection).
  * - Detects duplicate variable definitions (warning).
  * - Detects usages of undefined variables (error), excluding a predefined set of allowed undefined variables.
- * - Skips `src/palettes/variables.css` for usage checks as it is considered a definition-only file.
+ * - Scans `src/palettes/variables.css` for `var(...)` usages too: its semantic tokens reference primitives in the same file, so a missing primitive (e.g. a token dropped from the Figma export) would otherwise go undetected.
  * - Exits with code 1 if any undefined variable usages (without fallbacks) are found.
  *
  * Usage Examples:
@@ -106,9 +106,6 @@ async function run(): Promise<void> {
 
   for (const file of cssFiles) {
     const content = fs.readFileSync(file, 'utf8');
-    const isPaletteFile = file.endsWith(
-      `${path.sep}src${path.sep}palettes${path.sep}variables.css`
-    );
 
     const definitionRegex = /(^|[;{\s])(\-\-[A-Za-z0-9_-]+)\s*:/gm;
     for (const match of content.matchAll(definitionRegex)) {
@@ -132,10 +129,6 @@ async function run(): Promise<void> {
       definitions.set(name, [...(definitions.get(name) ?? []), location]);
     }
 
-    if (isPaletteFile) {
-      continue;
-    }
-
     let start = 0;
     while ((start = content.indexOf('var(', start)) !== -1) {
       let openParens = 1;

package/script/check-icon-hex-leaks.ts

@@ -0,0 +1,70 @@
+/**
+ * Fails `npm run lint:icons` if any generated icon (`src/icons/*.ts`) still
+ * contains a literal hex `fill="#…"` or `stroke="#…"` attribute. Every such
+ * attribute indicates one of:
+ *
+ *   1. A converter regression in `script/convert-icons.ts` (the most recent
+ *      example: `getSingleColorIcon` originally rewrote `fill` but not
+ *      `stroke`, leaking raw hex strokes into 27 icons across `obi-alarm-*`,
+ *      `obi-warning-*`, `obi-connector-*`, etc.).
+ *   2. An unbound Figma variable on a fill/stroke. Designers should bind the
+ *      color in Figma; if the variable id is new, regenerate
+ *      `script/figmavariables.json` from the obc-figma-plugin and re-run
+ *      `npm run download:icons`. See `script/.cache/unknown-variables.json`
+ *      for the per-id diagnostic.
+ *
+ * The check is intentionally zero-tolerance — there is currently no
+ * documented case where an icon legitimately needs a hard-coded hex, because
+ * the themed (`iconCss`) variant always uses CSS variables and the
+ * single-color (`icon`) variant always uses `currentColor`. If a future
+ * legitimate exception arises, prefer adding an explicit allowlist here over
+ * reintroducing a sliding budget.
+ */
+import * as fs from 'fs';
+import * as path from 'path';
+
+const iconsDir = path.resolve('src/icons');
+const hexAttrRegex = /(?:fill|stroke)="#[0-9A-Fa-f]{6,8}"/g;
+
+interface Leak {
+  file: string;
+  attr: string;
+}
+
+const leaks: Leak[] = [];
+
+for (const file of fs.readdirSync(iconsDir).sort()) {
+  if (!file.endsWith('.ts')) continue;
+  const text = fs.readFileSync(path.join(iconsDir, file), 'utf8');
+  const matches = text.match(hexAttrRegex);
+  if (!matches) continue;
+  for (const attr of matches) leaks.push({file, attr});
+}
+
+if (leaks.length === 0) {
+  console.log(
+    `[lint:icons] no literal hex fill/stroke attributes in ${iconsDir}`
+  );
+  process.exit(0);
+}
+
+console.error(
+  `[lint:icons] found ${leaks.length} literal hex fill/stroke attribute(s) in src/icons/*.ts:`
+);
+for (const {file, attr} of leaks) {
+  console.error(`  ${file}\t${attr}`);
+}
+console.error('');
+console.error(
+  '  Each leak is either (a) a converter regression in script/convert-icons.ts'
+);
+console.error(
+  '  or (b) a Figma variable that is not bound on the source fill/stroke.'
+);
+console.error(
+  '  See script/.cache/unknown-variables.json for unresolved variable ids,'
+);
+console.error(
+  '  and the JSDoc on this script for the full diagnostic checklist.'
+);
+process.exit(1);