@heartlandone/vega 2.75.0 → 2.76.0

package/dist/collection/helpers/slimmers/position-calculation/test/screen-position-calculation-strategy.test.js

@@ -1,7 +1,6 @@
 import { PositionCalculationMockedComponent } from './body-position-calculation-strategy.test';
+import { ScreenScrollPositionUpdate } from '../screen-scroll-position-update';
 describe('BodyPositionCalculationStrategy.getPositionBox', () => {
-  const component = new PositionCalculationMockedComponent();
-  component.setIsScreenPosition(true);
   const innerHTML = `
 	<div class='container'>
         <div class='target'> test target </div>
@@ -20,6 +19,11 @@ describe('BodyPositionCalculationStrategy.getPositionBox', () => {
     Object.assign(window, { innerHeight: 500 });
   });
   describe('directions', () => {
+    let component;
+    beforeEach(() => {
+      component = new PositionCalculationMockedComponent();
+      component.setIsScreenPosition(true);
+    });
     beforeAll(() => {
       mockElementReturn(element, 'getBoundingClientRect', { width: 50, height: 50 });
       mockElementReturn(target, 'getBoundingClientRect', {
@@ -29,19 +33,23 @@ describe('BodyPositionCalculationStrategy.getPositionBox', () => {
         left: 100,
       });
     });
-    test('return result as expected in top', () => {
+    test('return result as expected in top-start', () => {
       expect(component.getPositionBox(container, element, target, ['top'], ['start'])).toEqual({
         top: 50,
         left: 100,
         placement: 'top',
         alignment: 'start',
       });
+    });
+    test('return result as expected in top-center', () => {
       expect(component.getPositionBox(container, element, target, ['top'], ['center'])).toEqual({
         top: 50,
         left: 125,
         placement: 'top',
         alignment: 'center',
       });
+    });
+    test('return result as expected in top-end', () => {
       expect(component.getPositionBox(container, element, target, ['top'], ['end'])).toEqual({
         top: 50,
         left: 150,
@@ -49,19 +57,23 @@ describe('BodyPositionCalculationStrategy.getPositionBox', () => {
         alignment: 'end',
       });
     });
-    test('return result as expected in left', () => {
+    test('return result as expected in left-start', () => {
       expect(component.getPositionBox(container, element, target, ['left'], ['start'])).toEqual({
         top: 100,
         left: 50,
         placement: 'left',
         alignment: 'start',
       });
+    });
+    test('return result as expected in left-center', () => {
       expect(component.getPositionBox(container, element, target, ['left'], ['center'])).toEqual({
         top: 125,
         left: 50,
         placement: 'left',
         alignment: 'center',
       });
+    });
+    test('return result as expected in left-end', () => {
       expect(component.getPositionBox(container, element, target, ['left'], ['end'])).toEqual({
         top: 150,
         left: 50,
@@ -69,19 +81,23 @@ describe('BodyPositionCalculationStrategy.getPositionBox', () => {
         alignment: 'end',
       });
     });
-    test('return result as expected in bottom', () => {
+    test('return result as expected in bottom-start', () => {
       expect(component.getPositionBox(container, element, target, ['bottom'], ['start'])).toEqual({
         top: 200,
         left: 100,
         placement: 'bottom',
         alignment: 'start',
       });
+    });
+    test('return result as expected in bottom-center', () => {
       expect(component.getPositionBox(container, element, target, ['bottom'], ['center'])).toEqual({
         top: 200,
         left: 125,
         placement: 'bottom',
         alignment: 'center',
       });
+    });
+    test('return result as expected in bottom-end', () => {
       expect(component.getPositionBox(container, element, target, ['bottom'], ['end'])).toEqual({
         top: 200,
         left: 150,
@@ -89,19 +105,23 @@ describe('BodyPositionCalculationStrategy.getPositionBox', () => {
         alignment: 'end',
       });
     });
-    test('return result as expected in right', () => {
+    test('return result as expected in right-start', () => {
       expect(component.getPositionBox(container, element, target, ['right'], ['start'])).toEqual({
         top: 100,
         left: 200,
         placement: 'right',
         alignment: 'start',
       });
+    });
+    test('return result as expected in right-center', () => {
       expect(component.getPositionBox(container, element, target, ['right'], ['center'])).toEqual({
         top: 125,
         left: 200,
         placement: 'right',
         alignment: 'center',
       });
+    });
+    test('return result as expected in right-end', () => {
       expect(component.getPositionBox(container, element, target, ['right'], ['end'])).toEqual({
         top: 150,
         left: 200,
@@ -111,3 +131,80 @@ describe('BodyPositionCalculationStrategy.getPositionBox', () => {
     });
   });
 });
+describe('ScreenScrollPositionUpdate.shouldUpdatePosition', () => {
+  function makeRect(bounds) {
+    var _a, _b;
+    const width = (_a = bounds.width) !== null && _a !== void 0 ? _a : bounds.right - bounds.left;
+    const height = (_b = bounds.height) !== null && _b !== void 0 ? _b : bounds.bottom - bounds.top;
+    return {
+      x: bounds.left,
+      y: bounds.top,
+      left: bounds.left,
+      top: bounds.top,
+      right: bounds.right,
+      bottom: bounds.bottom,
+      width,
+      height,
+      toJSON: () => ({}),
+    };
+  }
+  test('returns shouldUpdate=true when target moved, target is within viewport, and appendable is not entirely within viewport', () => {
+    const strategy = new ScreenScrollPositionUpdate();
+    const previousTargetRect = makeRect({ left: 100, top: 100, right: 200, bottom: 200 });
+    const currentTargetRect = makeRect({ left: 100, top: 110, right: 200, bottom: 210 });
+    // Appendable is partially outside viewport (bottom > viewportHeight)
+    const appendableRect = makeRect({ left: 100, top: 480, right: 200, bottom: 520 });
+    const decision = strategy.shouldUpdatePosition({
+      previousTargetRect,
+      currentTargetRect,
+      appendableRect,
+      viewportWidth: 500,
+      viewportHeight: 500,
+    });
+    expect(decision).toEqual({ shouldUpdate: true });
+  });
+  test('returns shouldUpdate=false when target did not move', () => {
+    const strategy = new ScreenScrollPositionUpdate();
+    const previousTargetRect = makeRect({ left: 100, top: 100, right: 200, bottom: 200 });
+    const currentTargetRect = makeRect({ left: 100, top: 100, right: 200, bottom: 200 });
+    const appendableRect = makeRect({ left: 100, top: 480, right: 200, bottom: 520 });
+    const decision = strategy.shouldUpdatePosition({
+      previousTargetRect,
+      currentTargetRect,
+      appendableRect,
+      viewportWidth: 500,
+      viewportHeight: 500,
+    });
+    expect(decision).toEqual({ shouldUpdate: false });
+  });
+  test('returns shouldUpdate=false when target moved but is outside viewport', () => {
+    const strategy = new ScreenScrollPositionUpdate();
+    const previousTargetRect = makeRect({ left: 100, top: 100, right: 200, bottom: 200 });
+    // Target moved fully outside viewport (top >= viewportHeight)
+    const currentTargetRect = makeRect({ left: 100, top: 600, right: 200, bottom: 700 });
+    const appendableRect = makeRect({ left: 100, top: 480, right: 200, bottom: 520 });
+    const decision = strategy.shouldUpdatePosition({
+      previousTargetRect,
+      currentTargetRect,
+      appendableRect,
+      viewportWidth: 500,
+      viewportHeight: 500,
+    });
+    expect(decision).toEqual({ shouldUpdate: false });
+  });
+  test('returns shouldUpdate=false when appendable is entirely within viewport even if target moved', () => {
+    const strategy = new ScreenScrollPositionUpdate();
+    const previousTargetRect = makeRect({ left: 100, top: 100, right: 200, bottom: 200 });
+    const currentTargetRect = makeRect({ left: 100, top: 110, right: 200, bottom: 210 });
+    // Appendable fully inside viewport
+    const appendableRect = makeRect({ left: 100, top: 300, right: 200, bottom: 350 });
+    const decision = strategy.shouldUpdatePosition({
+      previousTargetRect,
+      currentTargetRect,
+      appendableRect,
+      viewportWidth: 500,
+      viewportHeight: 500,
+    });
+    expect(decision).toEqual({ shouldUpdate: false });
+  });
+});

package/dist/collection/helpers/slimmers/string-input-formatter-slimmer.js

@@ -9,7 +9,7 @@ import { isNonNullable } from '../../types/type-guard';
 import ChangeManager from '../change-manager/change-manager';
 import domNodeSubjectFactory from '../change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalComponentDidRender, VegaInternalPasteEvent, } from '../event-manager/event-id/vega-internal-event-id';
-import { waitForComponentDidRender } from '../common';
+import { waitForComponentDidRender } from '../common/wait-for-component-did-render';
 /** The `StringInputFormatterSlimmer` class in TypeScript is used to format input values based on specified strategies and handle events like keydown, blur, and focus. */
 export class StringInputFormatterSlimmer extends VegaSlimmer {
   constructor() {

package/dist/collection/helpers/slimmers/translation/translation-slimmer.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
-import { VegaInternalTranslation } from '../../translation';
+import { VegaInternalTranslation } from '../../translation/internal-translation-controller';
 /**
  * Translation slimmer for components to use.
  * Automatically triggers re-render in components that rely on this utility when the language changes.

package/dist/collection/helpers/theme/controllers/brand-style-controller.js

@@ -6,6 +6,7 @@ import ChangeManager from '../../change-manager/change-manager';
 import { DARK_MODE_CHANGE, GP_BRAND_CHANGE, } from '../../change-manager/subject/static-subject/static-subject-title';
 import { VegaInternalThemeManager } from '../internal-theme-manager';
 import { StyleControllerAbstract } from './style-controller.abstract';
+import { htmlSanitizer, styleSanitizeStrategy } from '../../../utils/sanitize';
 /**
  * Vega components brand style controller
  */
@@ -34,9 +35,10 @@ class BrandStyleController extends StyleControllerAbstract {
   generateThemeStyle() {
     this.tokens = Object.assign(LightModeColorTokens, LightModeBorderTokens, LightModeShadowTokens);
     const keys = Object.keys(this.tokens);
-    this.getStyleContainer(this.themeStyleContainerKey).innerHTML = `
+    const styleString = `
 :root {
 \t\t${keys.map((key) => `--v-${key}: ${this.tokens[key]};`).join('\n\t\t')}}`;
+    this.getStyleContainer(this.themeStyleContainerKey).innerHTML = htmlSanitizer.sanitize(styleString, styleSanitizeStrategy);
   }
   /**
    * Determines whether the observer should accept changes.

package/dist/collection/helpers/theme/controllers/color-schema-overriding-controller.js

@@ -1,8 +1,9 @@
-import tinycolor from 'tinycolor2';
+import { tinycolor } from '../../../polyfill/tinycolor/tinycolor-polyfill';
 import { OverridableColorTokens } from '../../../constants/tokens/overridable-color-tokens';
 import { OverridableBorderTokens } from '../../../constants/tokens/overridable-border-tokens';
 import { OverridableRingTokens } from '../../../constants/tokens/overridable-ring-tokens';
 import { vegaNonceManager } from '../../csp/vega-nonce-manager';
+import { htmlSanitizer, styleSanitizeStrategy } from '../../../utils/sanitize';
 /**
  * Vega components color override controller
  */
@@ -27,16 +28,17 @@ class ColorSchemaOverridingController {
    * @param {OverrideColor[]} overrideThemes Parsed custom override colors
    */
   applyTheme(overrideThemes) {
-    this.getOverrideThemeContainer().innerHTML = `
-:root {
-\t\t${overrideThemes
+    const styleString = `
+		:root {
+		\t\t${overrideThemes
       .filter((item) => {
       return !!item.value;
     })
       .map((item) => `--v-${item.name}: ${item.value};`)
       .join('\n\t\t')}
-}
-				`;
+		}
+						`;
+    this.getOverrideThemeContainer().innerHTML = htmlSanitizer.sanitize(styleString, styleSanitizeStrategy);
   }
   /* eslint-disable no-restricted-globals */
   /**

package/dist/collection/helpers/theme/controllers/dark-mode-style-controller.js

@@ -11,6 +11,7 @@ import ChangeManager from '../../change-manager/change-manager';
 import { Observer } from '../../change-manager/observer/observer';
 import { VegaInternalThemeManager } from '../internal-theme-manager';
 import { StyleControllerAbstract } from './style-controller.abstract';
+import { htmlSanitizer, styleSanitizeStrategy } from '../../../utils/sanitize';
 // TODO: Remove this after the token add in vega design.
 const CustomDarkModeColorTokens = {
   'bg-backdrop-loading': '0, 0, 0, 0.5',
@@ -57,9 +58,10 @@ class DarkModeStyleController extends StyleControllerAbstract {
     const oldTokens = Object.assign(DarkModeColorTokens, DarkModeBorderTokens, DarkModeRingTokens, DarkModeShadowTokens);
     this.darkModeColorAllTokens = Object.assign(VegaInternalThemeManager.getBranding() === 'heartland' ? oldTokens : newBrandTokens, CustomDarkModeColorTokens, this.dynamicCustomDarkModeColor);
     const keys = Object.keys(this.darkModeColorAllTokens);
-    this.getStyleContainer(this.themeStyleContainerKey).innerHTML = `
+    const styleString = `
 html.dark {
 \t\t${keys.map((key) => `--v-${key}: ${this.darkModeColorAllTokens[key]};`).join('\n\t\t')}}`;
+    this.getStyleContainer(this.themeStyleContainerKey).innerHTML = htmlSanitizer.sanitize(styleString, styleSanitizeStrategy);
   }
   /**
    * Determines whether the observer should accept changes.

package/dist/collection/helpers/theme/internal-theme-manager.js

@@ -3,6 +3,7 @@ import './controllers/dark-mode-style-controller';
 import ChangeManager from '../change-manager/change-manager';
 import { DARK_MODE_CHANGE, GP_BRAND_CHANGE, } from '../change-manager/subject/static-subject/static-subject-title';
 import './controllers/brand-style-controller';
+import { emptySanitizeStrategy, htmlSanitizer } from '../../utils/sanitize';
 /**
  * Vega components controller to control the internal theme manager
  */
@@ -23,7 +24,7 @@ class InternalThemeManager {
    * It removes all the custom override theme styles from the DOM
    */
   reset() {
-    VegaColorSchemaOverridingController.getOverrideThemeContainer().innerHTML = '';
+    VegaColorSchemaOverridingController.getOverrideThemeContainer().innerHTML = htmlSanitizer.sanitize('', emptySanitizeStrategy);
   }
   /* eslint-disable no-restricted-globals */
   /**

package/dist/collection/helpers/theme/tests/theme-manager-controller.test.js

@@ -308,8 +308,7 @@ describe('Dark mode', () => {
     var _a;
     VegaThemeManager.toggleDarkMode(true);
     expect((_a = document.head.querySelector('#vegaDarkModeStyle')) === null || _a === void 0 ? void 0 : _a.textContent).toMatchInlineSnapshot(`
-		"
-		html.dark {
+		"html.dark {
 				--v-bg-brand: 176, 180, 181, 1;
 				--v-bg-page: 24, 24, 48, 1;
 				--v-bg-primary: 4, 4, 28, 1;

package/dist/collection/helpers/ui/element-appender.js

@@ -71,6 +71,7 @@ export class ElementAppender {
    * @returns {void} Nothing is being returned.
    */
   show() {
+    this.positionCalculationController.clearScreenPositionScrollFrame();
     this.setShowConfig();
     if (!this.showConfig.target) {
       LogUtility.error(`No target element found, please add it at new elementAppender.`);
@@ -94,6 +95,7 @@ export class ElementAppender {
   hide() {
     if (!this.showConfig)
       return;
+    this.positionCalculationController.clearScreenPositionScrollFrame();
     this.toggleShow(false);
     this.resetContainerPosition();
     InternalVegaZIndexManager.removeZIndex(this.showConfig.appendableElement, 'base');
@@ -102,11 +104,7 @@ export class ElementAppender {
    * Update position while window scroll.
    */
   onScroll() {
-    var _a;
-    const currentTargetRect = this.showConfig.target.getBoundingClientRect();
-    if (this.showConfig.isScreenPosition &&
-      (currentTargetRect.left !== ((_a = this.previousTargetRect) === null || _a === void 0 ? void 0 : _a.left) ||
-        currentTargetRect.top !== this.previousTargetRect.top)) {
+    if (this.showConfig.isScreenPosition) {
       this.adjustPosition(true);
     }
   }
@@ -118,6 +116,7 @@ export class ElementAppender {
   destroy() {
     if (!this.showConfig)
       return;
+    this.positionCalculationController.clearScreenPositionScrollFrame();
     this.removeVisibleAppendElement(this.showConfig.appendableElement);
     this.resetContainerPosition();
     InternalVegaZIndexManager.removeZIndex(this.showConfig.appendableElement, 'base');

package/dist/collection/helpers/ui/test/element-appender.test.js

@@ -1,5 +1,6 @@
 import { LogUtility } from '../../../utils/log';
 import { ElementAppender } from '../element-appender';
+import { FeatureFlag } from '../../feature-control/feature-flag-controller';
 const innerHTML = `<div class='test-parent-host'><div class='test-host'><div class='dropdown'></div></div></div>`;
 test('return result as expect when call show', () => {
   document.body.innerHTML = innerHTML;
@@ -448,21 +449,41 @@ describe('screen position', () => {
       isScreenPosition: true,
     });
     drop1.show();
-    expect(element).toEqualHtml(`
-			<div class="dropdown vega-element-appender-appendable vega-alignment-start vega-placement-top" style="box-sizing: border-box; position: fixed; left: 100px; top: 50px; z-index: 10001;"></div>
-		`);
-    drop1['previousTargetRect'] = {
-      left: 10,
-      top: 10,
-    };
+    expect(element).toHaveClass('vega-placement-top');
+    expect(element.style.top).toEqual('50px');
+    targetRectSpyOn.and.returnValue({
+      width: 100,
+      height: 100,
+      top: 40,
+      left: 100,
+    });
     drop1.onScroll();
-    expect(element).toEqualHtml(`
-			<div class="dropdown vega-element-appender-appendable vega-alignment-start vega-placement-top" style="box-sizing: border-box; position: fixed; left: 100px; top: 50px; z-index: 10001;"></div>
-		`);
-    drop1['previousTargetRect'] = {
+    expect(element).toHaveClass('vega-placement-bottom');
+    expect(element.style.top).toEqual('140px');
+  });
+  test('should auto placement when body is scroll', () => {
+    const callbacks = [];
+    spyOn(FeatureFlag, 'isEnabled').and.returnValue(true);
+    spyOn(window, 'requestAnimationFrame').and.callFake((callback) => {
+      callbacks.push(callback);
+      return callbacks.length;
+    });
+    const targetRectSpyOn = spyOn(target, 'getBoundingClientRect');
+    targetRectSpyOn.and.returnValue({
+      width: 100,
+      height: 100,
+      top: 100,
       left: 100,
-      top: 10,
-    };
+    });
+    const drop1 = new ElementAppender({
+      target: target,
+      appendableElement: element,
+      placement: ['top', 'bottom'],
+      isScreenPosition: true,
+    });
+    drop1.show();
+    expect(element).toHaveClass('vega-placement-top');
+    expect(element.style.top).toEqual('50px');
     targetRectSpyOn.and.returnValue({
       width: 100,
       height: 100,
@@ -470,10 +491,38 @@ describe('screen position', () => {
       left: 100,
     });
     drop1.onScroll();
-    drop1['previousTargetRect'] = undefined;
     drop1.onScroll();
-    expect(element).toEqualHtml(`
-			<div class="dropdown vega-element-appender-appendable vega-alignment-start vega-placement-top" style="box-sizing: border-box; position: fixed; left: 100px; top: -10px; z-index: 10001;"></div>
-		`);
+    callbacks.forEach((callback) => callback(0));
+    expect(element).toHaveClass('vega-placement-bottom');
+    expect(element.style.top).toEqual('140px');
+    drop1.hide();
+  });
+  test('should not change placement when body is scroll and FeatureFlag is disabled', () => {
+    FeatureFlag.disable('VEGA_ELEMENT_APPENDER.AUTO_PLACEMENT');
+    const targetRectSpyOn = spyOn(target, 'getBoundingClientRect');
+    targetRectSpyOn.and.returnValue({
+      width: 100,
+      height: 100,
+      top: 100,
+      left: 100,
+    });
+    const drop1 = new ElementAppender({
+      target: target,
+      appendableElement: element,
+      placement: ['top', 'bottom'],
+      isScreenPosition: true,
+    });
+    drop1.show();
+    expect(element).toHaveClass('vega-placement-top');
+    expect(element.style.top).toEqual('50px');
+    targetRectSpyOn.and.returnValue({
+      width: 100,
+      height: 100,
+      top: 40,
+      left: 100,
+    });
+    drop1.onScroll();
+    expect(element).toHaveClass('vega-placement-top');
+    expect(element.style.top).toEqual('-10px');
   });
 });

package/dist/collection/index.js

@@ -4,3 +4,5 @@ export * from './constants/public-api';
 export * from './helpers/public-api';
 export * from './types/public-api';
 export * from './helpers/validator/public-rules';
+export { VegaRTEContent } from './components/vega-rich-text-editor/dto/content-state';
+export * from './components/vega-rich-text-editor/public-api';

package/dist/collection/polyfill/prism/index.js

@@ -0,0 +1,2 @@
+export { tokenize } from './tokenizer';
+export { getLanguageGrammar } from './languages/language-registry';

package/dist/collection/polyfill/prism/languages/css.js

@@ -0,0 +1,86 @@
+/**
+ * Grammar definition for CSS syntax highlighting.
+ * Handles selectors, properties, values, at-rules, comments, strings, and other CSS constructs.
+ */
+export const cssGrammar = {
+  comment: {
+    pattern: /\/\*[\s\S]*?\*\//,
+    greedy: true,
+  },
+  string: {
+    pattern: /("|')(?:\\[\s\S]|(?!\1)[^\\\n\r])*\1/,
+    greedy: true,
+  },
+  atrule: [
+    {
+      pattern: /@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,
+      inside: {
+        'rule': { pattern: /^@[\w-]+/ },
+        'selector-function-argument': {
+          pattern: /(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,
+          lookbehind: true,
+        },
+        'keyword': {
+          pattern: /(^|[^\w-])(?:and|not|only|or)(?![\w-])/,
+          lookbehind: true,
+        },
+        'punctuation': { pattern: /[;:(){}]/ },
+      },
+    },
+  ],
+  url: {
+    pattern: /\burl\((?:("|')(?:\\[\s\S]|(?!\1)[^\\\n\r])*\1|(?:[^\\\r\n()"']|\\[\s\S])*)\)/i,
+    greedy: true,
+    inside: {
+      function: { pattern: /^url/i },
+      punctuation: { pattern: /^\(|\)$/ },
+      string: {
+        pattern: /^("|')[\s\S]+(?=\1$)/,
+        lookbehind: true,
+      },
+    },
+  },
+  selector: {
+    pattern: /(?=\S)[^@;{}()]?(?:[^@;{}()\s]|\s+(?![\s{])|\((?:[^()]|\([^()]*\))*\))*(?=\s*\{)/,
+    inside: {
+      'pseudo-element': { pattern: /(?:::)[\w-]+/ },
+      'pseudo-class': { pattern: /(?::)[\w-]+/ },
+      'class': { pattern: /\.[\w-]+/ },
+      'id': { pattern: /#[\w-]+/ },
+      'attribute': {
+        pattern: /\[(?:[^[\]"']|("|')(?:\\[\s\S]|(?!\1)[^\\\n\r])*\1)*\]/,
+        greedy: true,
+        inside: {
+          'punctuation': { pattern: /^\[|\]$/ },
+          'attr-name': { pattern: /^(\s*)(?:(?!\s)[-\w\u00B7\u00C0-\u024F])+/i, lookbehind: true },
+          'attr-value': [{ pattern: /(=\s*)(?:"[^"]*"|'[^']*'|[^\s'"=]+)/, lookbehind: true }],
+          'operator': { pattern: /[|~*^$]?=/ },
+        },
+      },
+    },
+  },
+  property: {
+    pattern: /(?!\s)[-_a-z\u00B7\u00C0-\u024F][-\w\u00B7\u00C0-\u024F]*(?=\s*:)/i,
+  },
+  important: {
+    pattern: /!important\b/i,
+  },
+  function: {
+    pattern: /(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,
+    lookbehind: true,
+  },
+  number: {
+    pattern: /(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)(?:e[+-]?\d+)?/i,
+    lookbehind: true,
+  },
+  unit: {
+    pattern: /(\b\d+)(?:%|[a-z]+)/,
+    lookbehind: true,
+  },
+  punctuation: {
+    pattern: /[(){};:,]/,
+  },
+  operator: {
+    pattern: /[+\-*/=><~^|]+/,
+  },
+};

package/dist/collection/polyfill/prism/languages/javascript.js

@@ -0,0 +1,96 @@
+/**
+ * Grammar definition for JavaScript syntax highlighting.
+ * Handles keywords, operators, strings, template literals, numbers,
+ * regex literals, comments, functions, classes, and other JS constructs.
+ */
+export const javascriptGrammar = {
+  'comment': [
+    {
+      pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,
+      lookbehind: true,
+      greedy: true,
+    },
+    {
+      pattern: /(^|[^\\:])\/\/.*/,
+      lookbehind: true,
+      greedy: true,
+    },
+  ],
+  'string': [
+    {
+      pattern: /(["'])(?:\\[\s\S]|(?!\1)[^\\\r\n])*\1/,
+      greedy: true,
+    },
+  ],
+  'template-string': {
+    pattern: /`(?:\\[\s\S]|[^\\`])*`/,
+    greedy: true,
+    inside: {
+      'template-punctuation': {
+        pattern: /^`|`$/,
+      },
+      'interpolation': {
+        pattern: /\$\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})*\}/,
+        inside: {
+          'interpolation-punctuation': {
+            pattern: /^\$\{|\}$/,
+          },
+        },
+      },
+      'string': {
+        pattern: /[\s\S]+/,
+      },
+    },
+  },
+  'regex': {
+    pattern: 
+    // eslint-disable-next-line no-useless-escape
+    /((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[.\r\n,;:})\]]|\/\/))/,
+    lookbehind: true,
+    greedy: true,
+    inside: {
+      'regex-source': {
+        pattern: /^(\/)[\s\S]+(?=\/[a-z]*$)/,
+        lookbehind: true,
+      },
+      'regex-delimiter': {
+        pattern: /^\/|\/$/,
+      },
+      'regex-flags': {
+        pattern: /^[a-z]+$/,
+      },
+    },
+  },
+  'class-name': [
+    {
+      pattern: /(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,
+      lookbehind: true,
+      inside: {
+        punctuation: { pattern: /[.\\]/ },
+      },
+    },
+  ],
+  'keyword': [
+    {
+      pattern: /\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,
+    },
+  ],
+  'boolean': {
+    pattern: /\b(?:false|true)\b/,
+  },
+  'number': {
+    pattern: /\b(?:(?:0[xX][\dA-Fa-f](?:_[\dA-Fa-f])*|0[bB][01](?:_[01])*|0[oO][0-7](?:_[0-7])*)n?|(?:\d(?:_\d)*\.?\d*|\.\d+)(?:[Ee][+-]?\d(?:_\d)*)?n?|NaN|Infinity)\b/,
+  },
+  'function': {
+    pattern: /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,
+  },
+  'operator': {
+    pattern: /--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%|&^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/,
+  },
+  'punctuation': {
+    pattern: /[{}[\];(),.:]/,
+  },
+  'constant': {
+    pattern: /\b[A-Z](?:[A-Z_]|\dx)*\b/,
+  },
+};