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

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

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

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/components/icon-check-button/icon-check-button.css.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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:

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

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

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

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

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

package/dist/components/navigation-item/navigation-item.css.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -281,7 +281,8 @@ const componentStyle = css`
 }
 
 .button-text {
-  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:
@@ -533,7 +534,8 @@ obc-circular-progress {
 }
 
 .circular-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:

package/dist/components/progress-button/progress-button.css.js.map

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

package/dist/components/radio/radio.css.js

@@ -231,7 +231,8 @@ label.obc-radio-button.disabled {
             color: var(--on-flat-disabled-color) !important;
 }
 label.obc-radio-button {
-    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:
@@ -262,7 +263,8 @@ label.obc-radio-button.disabled .label,label.obc-radio-button.disabled:hover .la
       color: var(--element-disabled-color);
     }
 label.obc-radio-button:has(input: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/radio/radio.css.js.map

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

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

@@ -130,7 +130,8 @@ const compentStyle = css`
 }
 
 .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:
@@ -142,7 +143,8 @@ const compentStyle = css`
 }
 
 .description {
-  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/rich-button/rich-button.css.js.map

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

package/dist/components/sequence-item/sequence-item.css.js

@@ -55,7 +55,7 @@ const style = css`
 
 :is(.sequence-item__wrapper.orientation-vertical.label-multi-line.sequence-item__wrapper--has-description,.sequence-item__wrapper.orientation-vertical.label-small.sequence-item__wrapper--has-description,.sequence-item__wrapper.orientation-vertical.label-regular.sequence-item__wrapper--has-description) .title-row,:is(.sequence-item__wrapper.orientation-vertical.label-multi-line.sequence-item__wrapper--has-description,.sequence-item__wrapper.orientation-vertical.label-small.sequence-item__wrapper--has-description,.sequence-item__wrapper.orientation-vertical.label-regular.sequence-item__wrapper--has-description) .meta-row {
         padding: var(
-            --global-size-spacing-list-item-menu-padding-horizonal-list-item
+            --global-size-spacing-nav-item-and-menus-padding-horizonal-list-item
           )
           0;
       }
@@ -128,7 +128,9 @@ const style = css`
 
 .sequence-item__wrapper .title-row {
     display: flex;
-    gap: var(--global-size-spacing-list-item-menu-padding-horizonal-list-item);
+    gap: var(
+      --global-size-spacing-nav-item-and-menus-padding-horizonal-list-item
+    );
     justify-content: space-between;
     align-items: flex-start;
   }
@@ -141,7 +143,8 @@ const style = css`
 /* === Typography === */
 
 .sequence-item__wrapper .title,.sequence-item__wrapper .subtitle {
-    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:
@@ -159,7 +162,8 @@ const style = css`
   }
 
 .sequence-item__wrapper .subtitle {
-    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:
@@ -201,7 +205,7 @@ const style = css`
     "ss04" on;
     display: flex;
     flex-direction: column;
-    gap: var(--alert-components-badge-label-spacing);
+    gap: var(--ui-components-badge-label-spacing);
   }
 
 /* === Label Variants === */
@@ -253,7 +257,8 @@ const style = css`
     }
 
 .sequence-item__wrapper.label-small .meta-row {
-      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/sequence-item/sequence-item.css.js.map

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

package/dist/components/sequence-loading-spinner/sequence-loading-spinner.css.js

@@ -106,8 +106,8 @@ const componentStyle = css`
       background: conic-gradient(
         from 0deg,
         var(--element-neutral-enhanced-color) 0deg,
-        var(--element-neutral-enhanced-color) var(--spinner-progress-deg),
-        transparent var(--spinner-progress-deg),
+        var(--element-neutral-enhanced-color) var(--spinner-progress-deg, 0deg),
+        transparent var(--spinner-progress-deg, 0deg),
         transparent 360deg
       );
     }
@@ -122,7 +122,7 @@ const componentStyle = css`
     }
 
 :is(.sequence-loading-spinner.progression-determinate .spinner) .cap-end {
-      transform: translate(-50%, -50%) rotate(var(--spinner-progress-deg))
+      transform: translate(-50%, -50%) rotate(var(--spinner-progress-deg, 0deg))
         translateY(calc(-1 * var(--spinner-radius)));
     }
 

package/dist/components/sequence-step/sequence-step.css.js

@@ -369,7 +369,8 @@ button {
       }
 
 :is(:is(.wrapper.type-large .visible-wrapper) .node) .content {
-        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/sequence-step/sequence-step.css.js.map

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

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

@@ -218,7 +218,8 @@ const componentStyle = css`
 }
 
 .button-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/slide-button/slide-button.css.js.map

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