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

@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.49 → 2.0.0-next.52

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 (254) hide show

package/dist/components/floating-item/floating-item.css.js CHANGED Viewed

@@ -72,7 +72,8 @@ const componentStyle = css`
   }
 :is(.wrapper .title-container) .title {
-      font-family: var(--font-family-main);
+      font-family: var(--global-typography-font-family);
+      font-weight: var(--global-typography-ui-body-active-font-weight);
       font-size: var(--global-typography-ui-body-active-font-size);
       line-height: var(--global-typography-ui-body-active-line-height);
       font-feature-settings:
@@ -88,7 +89,8 @@ const componentStyle = css`
     }
 :is(.wrapper .title-container) .timestamp {
-      font-family: var(--font-family-main);
+      font-family: var(--global-typography-font-family);
+      font-weight: var(--global-typography-ui-label-font-weight);
       font-size: var(--global-typography-ui-label-font-size);
       line-height: var(--global-typography-ui-label-line-height);
       font-feature-settings:
@@ -109,7 +111,8 @@ const componentStyle = css`
     align-self: stretch;
     overflow: hidden;
     color: var(--element-active-color);
-    font-family: var(--font-family-main);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-body-font-weight);
     font-size: var(--global-typography-ui-body-font-size);
     line-height: var(--global-typography-ui-body-line-height);
     font-feature-settings:

package/dist/components/floating-item/floating-item.css.js.map CHANGED Viewed

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

package/dist/components/form-container/form-container.css.js CHANGED Viewed

@@ -69,7 +69,7 @@ const componentStyle = css`
   }
 .wrapper .content-title,.wrapper ::slotted([slot="content-title"]) {
-    font-family: var(--font-family-main);
+    font-family: var(--global-typography-font-family);
     font-weight: var(--font-weight-regular);
     font-size: var(--font-size-150);
     line-height: var(--line-height-150);

package/dist/components/form-group/form-group.css.js CHANGED Viewed

@@ -27,7 +27,8 @@ const componentStyle = css`
   }
 .wrapper .subtitle {
-    font-family: var(--font-family-main);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-overline-font-weight);
     font-size: var(--global-typography-ui-overline-font-size);
     line-height: var(--global-typography-ui-overline-line-height);
     letter-spacing: var(--global-typography-ui-overline-letter-spacing);
@@ -44,7 +45,8 @@ const componentStyle = css`
     }
 .wrapper .text {
-    font-family: var(--font-family-main);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-label-font-weight);
     font-size: var(--global-typography-ui-label-font-size);
     line-height: var(--global-typography-ui-label-line-height);
     font-feature-settings:

package/dist/components/form-group/form-group.css.js.map CHANGED Viewed

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

package/dist/components/form-item/form-item.css.js CHANGED Viewed

@@ -176,7 +176,8 @@ const componentStyle = css`
 .wrapper .text {
     position: relative;
     z-index: 1;
-    font-family: var(--font-family-main);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-body-font-weight);
     font-size: var(--global-typography-ui-body-font-size);
     line-height: var(--global-typography-ui-body-line-height);
     font-feature-settings:
@@ -235,7 +236,8 @@ const componentStyle = css`
   }
 .wrapper .error-text {
-    font-family: var(--font-family-main);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-label-font-weight);
     font-size: var(--global-typography-ui-label-font-size);
     line-height: var(--global-typography-ui-label-line-height);
     font-feature-settings:

package/dist/components/form-item/form-item.css.js.map CHANGED Viewed

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

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

@@ -102,7 +102,8 @@ const iconStyle = css`
   }
 .wrapper .label {
-    font-family: var(--font-family-main);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-label-font-weight);
     font-size: var(--global-typography-ui-label-font-size);
     line-height: var(--global-typography-ui-label-line-height);
     font-feature-settings:
@@ -353,33 +354,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 +392,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.css.js.map CHANGED Viewed

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

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

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

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

	@@ -1 +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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"}
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 * - `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/components/icon-check-button/icon-check-button.css.js CHANGED Viewed

@@ -117,7 +117,8 @@ const componentStyles = css`
 }
 .label {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-label-font-weight);
   font-size: var(--global-typography-ui-label-font-size);
   line-height: var(--global-typography-ui-label-line-height);
   font-feature-settings:
@@ -195,7 +196,8 @@ const componentStyles = css`
 .wrapper.state-checked .label {
   color: var(--element-active-color);
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-label-active-font-weight);
   font-size: var(--global-typography-ui-label-active-font-size);
   line-height: var(--global-typography-ui-label-active-line-height);
   font-feature-settings:

package/dist/components/icon-check-button/icon-check-button.css.js.map CHANGED Viewed

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

package/dist/components/input-chip/input-chip.css.js CHANGED Viewed

@@ -84,7 +84,8 @@ const compentStyle = css`
   flex-shrink: 0;
   border: none;
   background-color: transparent;
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-button-font-weight);
   font-size: var(--global-typography-ui-button-font-size);
   line-height: var(--global-typography-ui-button-line-height);
   font-feature-settings:

package/dist/components/input-chip/input-chip.css.js.map CHANGED Viewed

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

package/dist/components/keyboard-full/keyboard-full.css.js CHANGED Viewed

@@ -36,7 +36,8 @@ const componentStyle = css`
 }
 .parameter-name {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-overline-font-weight);
   font-size: var(--global-typography-ui-overline-font-size);
   line-height: var(--global-typography-ui-overline-line-height);
   letter-spacing: var(--global-typography-ui-overline-letter-spacing);

package/dist/components/keyboard-full/keyboard-full.css.js.map CHANGED Viewed

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

package/dist/components/keyboard-numeric/keyboard-numeric.css.js CHANGED Viewed

@@ -38,7 +38,8 @@ const componentStyle = css`
 }
 .parameter-name {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-overline-font-weight);
   font-size: var(--global-typography-ui-overline-font-size);
   line-height: var(--global-typography-ui-overline-line-height);
   letter-spacing: var(--global-typography-ui-overline-letter-spacing);

package/dist/components/keyboard-numeric/keyboard-numeric.css.js.map CHANGED Viewed

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

package/dist/components/menu-button/menu-button.css.js CHANGED Viewed

@@ -17,7 +17,8 @@ const compentStyle = css`
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-button-font-weight);
   font-size: var(--global-typography-ui-button-font-size);
   line-height: var(--global-typography-ui-button-line-height);
   font-feature-settings:
@@ -160,7 +161,8 @@ const compentStyle = css`
     display: flex;
     justify-content: center;
     align-items: center;
-    font-family: var(--font-family-main);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-button-font-weight);
     font-size: var(--global-typography-ui-button-font-size);
     line-height: var(--global-typography-ui-button-line-height);
     font-feature-settings:

package/dist/components/menu-button/menu-button.css.js.map CHANGED Viewed

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

package/dist/components/message-menu-item/message-menu-item.css.js CHANGED Viewed

@@ -114,7 +114,8 @@ const compentStyle = css`
 .wrapper .title-container {
     grid-area: title;
-    font-family: var(--font-family-main);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-body-active-font-weight);
     font-size: var(--global-typography-ui-body-active-font-size);
     line-height: var(--global-typography-ui-body-active-line-height);
     font-feature-settings:
@@ -127,7 +128,8 @@ const compentStyle = css`
 .wrapper .description-container {
     grid-area: description;
-    font-family: var(--font-family-main);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-body-font-weight);
     font-size: var(--global-typography-ui-body-font-size);
     line-height: var(--global-typography-ui-body-line-height);
     font-feature-settings:
@@ -152,7 +154,8 @@ const compentStyle = css`
 .wrapper .date-container {
     grid-area: date;
-    font-family: var(--font-family-main);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-label-font-weight);
     font-size: var(--global-typography-ui-label-font-size);
     line-height: var(--global-typography-ui-label-line-height);
     font-feature-settings:
@@ -165,18 +168,10 @@ const compentStyle = css`
     gap: var(--app-components-message-menu-item-label-spacing);
     color: var(--element-neutral-color);
+    white-space: nowrap;
+    text-wrap: nowrap;
   }
-:is(.wrapper .date-container) .day,:is(.wrapper .date-container) .time {
-      font-family: var(--font-family-main);
-      font-size: var(--global-typography-ui-label-font-size);
-      line-height: var(--global-typography-ui-label-line-height);
-      font-feature-settings:
-    "liga" off,
-    "clig" off,
-    "ss04" on;
-    }
 .wrapper .chevron {
     grid-area: chevron;
     width: var(--app-components-message-menu-item-icon-size-regular);

package/dist/components/message-menu-item/message-menu-item.css.js.map CHANGED Viewed

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

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

@@ -53,7 +53,8 @@ const componentStyle = css`
 }
 .label-container {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-overline-font-weight);
   font-size: var(--global-typography-ui-overline-font-size);
   line-height: var(--global-typography-ui-overline-line-height);
   letter-spacing: var(--global-typography-ui-overline-letter-spacing);

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/navigation-item/navigation-item.css.js CHANGED Viewed

@@ -113,7 +113,9 @@ const compentStyle = css`
 .wrapper {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-body-font-weight);
   font-size: var(--global-typography-ui-body-font-size);
@@ -220,7 +222,8 @@ const compentStyle = css`
     }
 .wrapper.compact .label {
-      font-family: var(--font-family-main);
+      font-family: var(--global-typography-font-family);
+      font-weight: var(--global-typography-ui-label-font-weight);
       font-size: var(--global-typography-ui-label-font-size);
       line-height: var(--global-typography-ui-label-line-height);
       font-feature-settings:
@@ -232,7 +235,8 @@ const compentStyle = css`
     }
 .checked :is(.wrapper.compact .label) {
-        font-family: var(--font-family-main);
+        font-family: var(--global-typography-font-family);
+        font-weight: var(--global-typography-ui-label-active-font-weight);
         font-size: var(--global-typography-ui-label-active-font-size);
         line-height: var(--global-typography-ui-label-active-line-height);
         font-feature-settings:
@@ -310,7 +314,8 @@ const compentStyle = css`
 }
 .wrapper.checked {
-    font-family: var(--font-family-main);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-body-active-font-weight);
     font-size: var(--global-typography-ui-body-active-font-size);
     line-height: var(--global-typography-ui-body-active-line-height);
     font-feature-settings:

package/dist/components/navigation-item/navigation-item.css.js.map CHANGED Viewed

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

package/dist/components/notification-badge-button/notification-badge-button.css.js CHANGED Viewed

@@ -95,7 +95,8 @@ const componentStyle = css`
 }
 .wrapper {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-button-font-weight);
   font-size: var(--global-typography-ui-button-font-size);
   line-height: var(--global-typography-ui-button-line-height);
   font-feature-settings:

package/dist/components/notification-badge-button/notification-badge-button.css.js.map CHANGED Viewed

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

package/dist/components/notification-button/notification-button.css.js CHANGED Viewed

@@ -301,7 +301,8 @@ obi-notification-filled {
 }
 .count-label {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-button-font-weight);
   font-size: var(--global-typography-ui-button-font-size);
   line-height: var(--global-typography-ui-button-line-height);
   font-feature-settings:

package/dist/components/notification-button/notification-button.css.js.map CHANGED Viewed

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

package/dist/components/number-input-field/number-input-field.css.js CHANGED Viewed

@@ -158,7 +158,8 @@ const componentStyle = css`
   }
 .label-text {
-    font-family: var(--font-family-main);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-label-font-weight);
     font-size: var(--global-typography-ui-label-font-size);
     line-height: var(--global-typography-ui-label-line-height);
     font-feature-settings:
@@ -314,7 +315,8 @@ const componentStyle = css`
 .helper-text,
   .error-text {
-    font-family: var(--font-family-main);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-label-font-weight);
     font-size: var(--global-typography-ui-label-font-size);
     line-height: var(--global-typography-ui-label-line-height);
     font-feature-settings:

package/dist/components/number-input-field/number-input-field.css.js.map CHANGED Viewed

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

package/dist/components/pivot-item/pivot-item.css.js CHANGED Viewed

@@ -157,7 +157,8 @@ const compentStyle = css`
   }
 .wrapper.selected .label {
-      font-family: var(--font-family-main);
+      font-family: var(--global-typography-font-family);
+      font-weight: var(--global-typography-ui-body-active-font-weight);
       font-size: var(--global-typography-ui-body-active-font-size);
       line-height: var(--global-typography-ui-body-active-line-height);
       font-feature-settings:
@@ -171,7 +172,8 @@ const compentStyle = css`
     }
 .wrapper .label {
-    font-family: var(--font-family-main);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-body-font-weight);
     font-size: var(--global-typography-ui-body-font-size);
     line-height: var(--global-typography-ui-body-line-height);
     font-feature-settings:

package/dist/components/pivot-item/pivot-item.css.js.map CHANGED Viewed

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

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

@@ -139,7 +139,8 @@ const componentStyle = css`
 }
 .description-text {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-label-font-weight);
   font-size: var(--global-typography-ui-label-font-size);
   line-height: var(--global-typography-ui-label-line-height);
   font-feature-settings:
@@ -183,7 +184,8 @@ obc-circular-progress {
 }
 .circular-value {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-button-font-weight);
   font-size: var(--global-typography-ui-button-font-size);
   line-height: var(--global-typography-ui-button-line-height);
   font-feature-settings:

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}