wabtec-internal-volt-basic-components 1.2.0 → 1.4.0

package/dist/assets/scripts/figma-props-vds.json

@@ -0,0 +1,191 @@
+[
+  "box-shadow-color-01",
+  "box-shadow-color-02",
+  "color-background-brand-default",
+  "color-background-brand-hover",
+  "color-background-brand-press",
+  "color-background-caution-default",
+  "color-background-caution-lowest-default",
+  "color-background-caution-lowest-hover",
+  "color-background-caution-lowest-press",
+  "color-background-danger-default",
+  "color-background-danger-high-default",
+  "color-background-danger-high-hover",
+  "color-background-danger-high-press",
+  "color-background-danger-lowest-default",
+  "color-background-danger-lowest-hover",
+  "color-background-danger-lowest-press",
+  "color-background-disabled",
+  "color-background-general-default",
+  "color-background-general-lowest-default",
+  "color-background-general-lowest-hover",
+  "color-background-general-lowest-press",
+  "color-background-healthy-default",
+  "color-background-healthy-lowest-default",
+  "color-background-healthy-lowest-hover",
+  "color-background-healthy-lowest-press",
+  "color-background-information-default",
+  "color-background-information-lowest-default",
+  "color-background-information-lowest-hover",
+  "color-background-information-lowest-press",
+  "color-background-neutral-default",
+  "color-background-neutral-hover",
+  "color-background-neutral-lowest-default",
+  "color-background-neutral-lowest-hover",
+  "color-background-neutral-lowest-press",
+  "color-background-neutral-press",
+  "color-background-warning-default",
+  "color-background-warning-lowest-default",
+  "color-background-warning-lowest-hover",
+  "color-background-warning-lowest-press",
+  "color-border-brand",
+  "color-border-brand-hover",
+  "color-border-brand-low",
+  "color-border-brand-lower",
+  "color-border-brand-lowest",
+  "color-border-brand-medium",
+  "color-border-caution",
+  "color-border-danger",
+  "color-border-data-viz",
+  "color-border-disabled",
+  "color-border-focus-1",
+  "color-border-focus-2",
+  "color-border-general",
+  "color-border-healthy",
+  "color-border-high",
+  "color-border-information",
+  "color-border-low",
+  "color-border-lower",
+  "color-border-lowest",
+  "color-border-medium",
+  "color-border-warning",
+  "color-border-white-high",
+  "color-border-white-low",
+  "color-border-white-lower",
+  "color-border-white-lowest",
+  "color-border-white-medium",
+  "color-icon-brand-default",
+  "color-icon-brand-hover",
+  "color-icon-brand-press",
+  "color-icon-caution",
+  "color-icon-danger",
+  "color-icon-disabled",
+  "color-icon-general",
+  "color-icon-healthy",
+  "color-icon-high",
+  "color-icon-information",
+  "color-icon-low",
+  "color-icon-medium",
+  "color-icon-warning",
+  "color-icon-white-high",
+  "color-icon-white-low",
+  "color-icon-white-medium",
+  "color-interaction-backdrop",
+  "color-interaction-black-low",
+  "color-interaction-black-lower",
+  "color-interaction-black-lowest",
+  "color-interaction-black-medium",
+  "color-interaction-brand-low",
+  "color-interaction-brand-lower",
+  "color-interaction-brand-lowest",
+  "color-interaction-brand-medium",
+  "color-interaction-danger-low",
+  "color-interaction-danger-lower",
+  "color-interaction-danger-lowest",
+  "color-interaction-danger-medium",
+  "color-interaction-white-low",
+  "color-interaction-white-lower",
+  "color-interaction-white-lowest",
+  "color-interaction-white-medium",
+  "color-link-default",
+  "color-link-hover",
+  "color-link-press",
+  "color-text-brand",
+  "color-text-caution-high",
+  "color-text-caution-medium",
+  "color-text-danger-high",
+  "color-text-danger-medium",
+  "color-text-disabled",
+  "color-text-general-high",
+  "color-text-general-medium",
+  "color-text-healthy-high",
+  "color-text-healthy-medium",
+  "color-text-high",
+  "color-text-information-high",
+  "color-text-information-medium",
+  "color-text-low",
+  "color-text-medium",
+  "color-text-warning-high",
+  "color-text-warning-medium",
+  "color-text-white-high",
+  "color-text-white-low",
+  "color-text-white-medium",
+  "shadow-color-01",
+  "shadow-color-02",
+  "shadow-color-03",
+  "shadow-color-04",
+  "shadow-shadow-01-blur-01",
+  "shadow-shadow-01-blur-02",
+  "shadow-shadow-01-spread-01",
+  "shadow-shadow-01-spread-02",
+  "shadow-shadow-01-x-01",
+  "shadow-shadow-01-x-02",
+  "shadow-shadow-01-y-01",
+  "shadow-shadow-01-y-02",
+  "shadow-shadow-02-blur-01",
+  "shadow-shadow-02-blur-02",
+  "shadow-shadow-02-spread-01",
+  "shadow-shadow-02-spread-02",
+  "shadow-shadow-02-x-01",
+  "shadow-shadow-02-x-02",
+  "shadow-shadow-02-y-01",
+  "shadow-shadow-02-y-02",
+  "shadow-shadow-03-blur-01",
+  "shadow-shadow-03-blur-02",
+  "shadow-shadow-03-spread-01",
+  "shadow-shadow-03-spread-02",
+  "shadow-shadow-03-x-01",
+  "shadow-shadow-03-x-02",
+  "shadow-shadow-03-y-01",
+  "shadow-shadow-03-y-02",
+  "shadow-shadow-05-blur-01",
+  "shadow-shadow-05-blur-02",
+  "shadow-shadow-05-spread-01",
+  "shadow-shadow-05-spread-02",
+  "shadow-shadow-05-x-01",
+  "shadow-shadow-05-x-02",
+  "shadow-shadow-05-y-01",
+  "shadow-shadow-05-y-02",
+  "shadow-shadow-08-blur-01",
+  "shadow-shadow-08-blur-02",
+  "shadow-shadow-08-spread-01",
+  "shadow-shadow-08-spread-02",
+  "shadow-shadow-08-x-01",
+  "shadow-shadow-08-x-02",
+  "shadow-shadow-08-y-01",
+  "shadow-shadow-08-y-02",
+  "shadow-shadow-17-blur-01",
+  "shadow-shadow-17-blur-02",
+  "shadow-shadow-17-spread-01",
+  "shadow-shadow-17-spread-02",
+  "shadow-shadow-17-x-01",
+  "shadow-shadow-17-x-02",
+  "shadow-shadow-17-y-01",
+  "shadow-shadow-17-y-02",
+  "surface-elevation-01",
+  "surface-elevation-02",
+  "surface-elevation-03",
+  "surface-elevation-04",
+  "surface-high",
+  "surface-higher",
+  "surface-low",
+  "surface-lower",
+  "surface-medium",
+  "surface-neutral-default",
+  "surface-neutral-hover",
+  "surface-neutral-press",
+  "surface-overlay-default",
+  "surface-overlay-hover",
+  "surface-overlay-press",
+  "transparent"
+]

package/dist/assets/scripts/figma-tokens-to-css.js

@@ -0,0 +1,278 @@
+/*
+ * Themes CSS generator
+ *
+ * NOTE: Import the generated CSS file AFTER your main/regular CSS.
+ * Doing so ensures the token variables here override defaults declared
+ * earlier in your application's styles.
+ *
+ * How it works (brief):
+ * - This script emits CSS custom properties (variables) in three places:
+ *   1) `:root body { ... }`         -> default/light values (or the chosen default)
+ *   2) `:root .theme-light { ... }` -> explicit light theme overrides
+ *   3) `:root .theme-dark { ... }`  -> explicit dark theme overrides
+ *
+ * Why that structure:
+ * - Variables declared on `:root` are global. Declaring variables on
+ *   `body` (via `:root body`) gives a slightly more specific selector
+ *   and — when this file is imported after your main CSS — will replace
+ *   values defined earlier. The `.theme-dark` / `.theme-light` blocks
+ *   scope alternate token sets to any element carrying that class.
+ *
+ * Usage tips:
+ * - Import the generated `themes.css` after your main stylesheet:
+ *
+ *     <link rel="stylesheet" href="main.css">
+ *     <link rel="stylesheet" href="path/to/themes.css">
+ *
+ * - Toggle dark mode by adding a class to your root element (example):
+ *
+ *     document.documentElement.classList.add('theme-dark')
+ *
+ *   or place the class on a high-level container so the `.theme-dark`
+ *   rules apply to its descendants.
+ *
+ * Generated file defaults to `src/assets/styles/themes.css` but the
+ * script prompts for paths and can write elsewhere.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const readline = require('readline');
+
+// --- Defaults ---
+const DEFAULT_FIGMA_PROPS = path.join(__dirname, './figma-props-vds.json');
+const DEFAULT_LIGHT_TOKENS = path.join(process.cwd(), 'src/assets/json/Light.tokens.json');
+const DEFAULT_DARK_TOKENS = path.join(process.cwd(), 'src/assets/json/Dark.tokens.json');
+const DEFAULT_OUTPUT_FILE = path.join(process.cwd(), 'src/assets/styles/themes.css');
+
+// --- Configuration Lists ---
+const deletedKeys = [
+  "shadow-shadow-01-blur-01", "shadow-shadow-01-blur-02", "shadow-shadow-01-x-01", "shadow-shadow-01-x-02",
+  "shadow-shadow-01-y-01", "shadow-shadow-01-y-02", "shadow-shadow-01-spread-01", "shadow-shadow-01-spread-02",
+  "shadow-shadow-02-blur-01", "shadow-shadow-02-blur-02", "shadow-shadow-02-x-01", "shadow-shadow-02-x-02",
+  "shadow-shadow-02-y-01", "shadow-shadow-02-y-02", "shadow-shadow-02-spread-01", "shadow-shadow-02-spread-02",
+  "shadow-shadow-03-blur-01", "shadow-shadow-03-blur-02", "shadow-shadow-03-x-01", "shadow-shadow-03-x-02",
+  "shadow-shadow-03-y-01", "shadow-shadow-03-y-02", "shadow-shadow-03-spread-01", "shadow-shadow-03-spread-02",
+  "shadow-shadow-05-blur-01", "shadow-shadow-05-blur-02", "shadow-shadow-05-x-01", "shadow-shadow-05-x-02",
+  "shadow-shadow-05-y-01", "shadow-shadow-05-y-02", "shadow-shadow-05-spread-01", "shadow-shadow-05-spread-02",
+  "shadow-shadow-08-blur-01", "shadow-shadow-08-blur-02", "shadow-shadow-08-x-01", "shadow-shadow-08-x-02",
+  "shadow-shadow-08-y-01", "shadow-shadow-08-y-02", "shadow-shadow-08-spread-01", "shadow-shadow-08-spread-02",
+  "shadow-shadow-17-blur-01", "shadow-shadow-17-blur-02", "shadow-shadow-17-x-01", "shadow-shadow-17-x-02",
+  "shadow-shadow-17-y-01", "shadow-shadow-17-y-02", "shadow-shadow-17-spread-01", "shadow-shadow-17-spread-02"
+];
+
+const renamedKeys = {
+  "shadow-color-01": "box-shadow-color-01",
+  "shadow-color-02": "box-shadow-color-02",
+  "shadow-color-03": "box-shadow-color-03",
+  "shadow-color-04": "box-shadow-color-04"
+}
+
+// --- Helper Functions ---
+
+/**
+ * Prompts the user for input via the terminal.
+ */
+function askQuestion(rl, question, defaultValue) {
+  return new Promise((resolve) => {
+    rl.question(`\n${question}\n   Default: ${defaultValue}\n   > `, (answer) => {
+      resolve(answer.trim() || defaultValue);
+    });
+  });
+}
+
+/**
+ * Recursively flattens a nested JSON object into a list of token objects.
+ */
+function flattenTokens(obj, currentPath = []) {
+  let result = [];
+  
+  for (const key in obj) {
+    if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
+    
+    const value = obj[key];
+    const newPath = [...currentPath, key];
+    
+    // Check if we reached a token (has 'value' or '$value')
+    if (typeof value === 'object' && value !== null && ('value' in value || '$value' in value)) {
+      result.push({
+        path: newPath,
+        $value: value.$value || value.value
+      });
+    } 
+    // If it's a group
+    else if (typeof value === 'object' && value !== null) {
+      result = result.concat(flattenTokens(value, newPath));
+    }
+  }
+  return result;
+}
+
+/**
+ * Basic transform to handle Figma aliases if they exist.
+ * Converts {colors.blue} -> var(--colors-blue)
+ */
+function transformValue(value) {
+  if (typeof value !== 'string') return value;
+  return value.replace(/{([^}]+)}/g, (match, pathContent) => {
+    // Replace dots with hyphens for CSS variable syntax
+    return `var(--${pathContent.replace(/\./g, '-')})`;
+  });
+}
+
+function convertToRgbaString(tokenValue) {
+  if (!tokenValue.components || tokenValue.components.length < 3) {
+    return tokenValue.hex || '#000000';
+  }
+
+  // Convert 0-1 float to 0-255 integer
+  const r = Math.round(tokenValue.components[0] * 255);
+  const g = Math.round(tokenValue.components[1] * 255);
+  const b = Math.round(tokenValue.components[2] * 255);
+  
+  const a = tokenValue.alpha !== undefined ? parseFloat(tokenValue.alpha.toFixed(3)) : 1;
+
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+
+/**
+ * Processes a single token file to generate a CSS string for a given theme selector.
+ */
+async function generateThemeCss(tokenPath, selector, figmaPropsList) {
+  console.log(`Processing theme from: ${path.basename(tokenPath)} for selector "${selector}"...`);
+
+  if (!fs.existsSync(tokenPath)) {
+    console.error(`Error: Token file not found at ${tokenPath}`);
+    return '';
+  }
+
+  let rawData;
+  try {
+    rawData = JSON.parse(fs.readFileSync(tokenPath, 'utf8'));
+  } catch (e) {
+    console.error(`Error parsing JSON at ${tokenPath}:`, e.message);
+    return '';
+  }
+
+  const allTokens = flattenTokens(rawData);
+
+  if (!allTokens || allTokens.length === 0) {
+    console.warn(`Warning: No properties were captured for ${selector}.`);
+    return '';
+  }
+
+  const cssVariables = allTokens
+    .map(prop => {
+      let name = prop.path.join('-');
+      
+      if (figmaPropsList.includes(name)) {
+        if (deletedKeys.includes(name)) return null;
+        if (renamedKeys[name]) name = renamedKeys[name];
+        
+        // 1. Resolve Aliases (Strings)
+        let val = transformValue(prop['$value']);
+
+        // 2. Handle Color Objects (Calculation for RGBA)
+        if (typeof val === 'object' && val !== null) {
+          if (val.alpha !== 1) {
+            const rgbaString = convertToRgbaString(val);
+            return `  --${name}: ${rgbaString};`;
+          }
+
+          return `  --${name}: ${val.hex || JSON.stringify(val)};`;
+        }
+
+        return `  --${name}: ${val};`;
+      }
+      return null;
+    })
+    .filter(line => line)
+    .join('\n');
+
+  if (!cssVariables) {
+    console.warn(`Warning: No CSS variables were generated for ${selector} after filtering.`);
+    return '';
+  }
+
+  return `${selector} {\n${cssVariables}\n}\n\n`;
+}
+
+// --- Main Execution ---
+async function buildThemes() {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+
+  console.log("--- Theme Generator Configuration (No Dependencies) ---");
+
+  const figmaPropsInput = await askQuestion(rl, "Enter path for Figma Props (Allowlist) JSON (Default to all tokens):", DEFAULT_FIGMA_PROPS);
+  const lightTokenInput = await askQuestion(rl, "Enter path for Light Tokens JSON:", DEFAULT_LIGHT_TOKENS);
+  const darkTokenInput = await askQuestion(rl, "Enter path for Dark Tokens JSON:", DEFAULT_DARK_TOKENS);
+  let outputCssInput = await askQuestion(rl, "Enter path for Output CSS file:", DEFAULT_OUTPUT_FILE);
+  let defaultThemeChoice = await askQuestion(rl, "Which theme should be the default for ':root body'? (light/dark)", "light");
+  defaultThemeChoice = defaultThemeChoice.toLowerCase();
+
+  rl.close();
+
+  const FIGMA_PROPS_PATH = path.resolve(figmaPropsInput);
+  const LIGHT_TOKEN_PATH = path.resolve(lightTokenInput);
+  const DARK_TOKEN_PATH = path.resolve(darkTokenInput);
+
+  let OUTPUT_CSS_FILE = path.resolve(outputCssInput);
+  try {
+    if (fs.existsSync(OUTPUT_CSS_FILE) && fs.lstatSync(OUTPUT_CSS_FILE).isDirectory()) {
+      OUTPUT_CSS_FILE = path.join(OUTPUT_CSS_FILE, 'themes.css');
+      console.log(`Note: Path was a directory. Output changed to: ${OUTPUT_CSS_FILE}`);
+    } else if (!fs.existsSync(OUTPUT_CSS_FILE) && !path.extname(OUTPUT_CSS_FILE)) {
+      OUTPUT_CSS_FILE = path.join(OUTPUT_CSS_FILE, 'themes.css');
+    }
+  } catch (e) {
+    console.warn("Path check warning:", e.message);
+  }
+
+  if (!fs.existsSync(FIGMA_PROPS_PATH)) {
+    console.error(`\nError: The allowlist file was not found at ${FIGMA_PROPS_PATH}`);
+    process.exit(1);
+  }
+  const figmaProps = require(FIGMA_PROPS_PATH);
+
+  let defaultTokenPath;
+  let defaultThemeName;
+
+  if (defaultThemeChoice === 'dark') {
+    defaultTokenPath = DARK_TOKEN_PATH;
+    defaultThemeName = "Dark Theme";
+  } else {
+    defaultTokenPath = LIGHT_TOKEN_PATH;
+    defaultThemeName = "Light Theme"; 
+  }
+
+  console.log(`\n--- Starting Build ---`);
+  
+  let finalCssOutput = `/*
+ * Generated by figma-tokens-to-css.js
+ * 
+ * INSTRUCTIONS:
+ * Import this file AFTER your main/regular CSS file.
+ * 
+ * STRUCTURE:
+ * - :root body         -> Default (${defaultThemeName}) overrides
+ * - :root .theme-light -> Explicit Light Theme overrides
+ * - :root .theme-dark  -> Explicit Dark Theme overrides
+ */\n\n`;
+
+  finalCssOutput += await generateThemeCss(defaultTokenPath, ':root body', figmaProps);
+  finalCssOutput += await generateThemeCss(LIGHT_TOKEN_PATH, ':root .theme-light', figmaProps);
+  finalCssOutput += await generateThemeCss(DARK_TOKEN_PATH, ':root .theme-dark', figmaProps);
+
+  const outputDir = path.dirname(OUTPUT_CSS_FILE);
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+
+  fs.writeFileSync(OUTPUT_CSS_FILE, finalCssOutput);
+  console.log(`\n✔︎ CSS themes file saved to: ${OUTPUT_CSS_FILE}`);
+}
+
+buildThemes();

package/dist/cjs/attribute-sync-BjXJ3Bpx.js

@@ -0,0 +1,118 @@
+'use strict';
+
+/**
+ * Attributes to exclude from synchronization.
+ * These are typically handled by Stencil @Props or should not be forwarded.
+ */
+const EXCLUDED_ATTRIBUTES = [
+    "class",
+    "style",
+    "label",
+    "size",
+    "type",
+    "value",
+    "placeholder",
+    "disabled",
+    "readonly",
+    "is-readonly",
+    "error",
+    "required",
+    "is-required",
+    "informative-icon",
+    "formatter",
+    "allowed-styles",
+];
+/**
+ * Presence/absence boolean attributes to normalize
+ */
+const BOOLEAN_ATTRIBUTES = new Set(["autofocus", "multiple", "spellcheck"]);
+/**
+ * Sets up automatic synchronization of attributes from a host element to an internal native element.
+ * Syncs all attributes except those in the exclusion list.
+ * Useful for wrapper components that need to forward HTML attributes to shadow DOM elements.
+ *
+ * @param hostEl The host element to watch for attribute changes
+ * @param getInternalEl Function that returns the internal native element to sync to
+ * @returns Cleanup function to disconnect the observer
+ */
+const setupAttributeSync = (hostEl, getInternalEl, additionalExcludedAttributes = []) => {
+    const excludedAttrs = [
+        ...EXCLUDED_ATTRIBUTES,
+        ...additionalExcludedAttributes
+    ];
+    // Intercept boolean property and convert to attributes
+    BOOLEAN_ATTRIBUTES.forEach(prop => {
+        const existing = Object.getOwnPropertyDescriptor(hostEl, prop);
+        if (!existing) {
+            Object.defineProperty(hostEl, prop, {
+                get() {
+                    return this.hasAttribute(prop);
+                },
+                set(val) {
+                    if (!!val)
+                        this.setAttribute(prop, "");
+                    else
+                        this.removeAttribute(prop);
+                },
+                configurable: true
+            });
+        }
+    });
+    const syncAttributes = () => {
+        const internalEl = getInternalEl();
+        if (!internalEl)
+            return;
+        // Sync all attributes except excluded ones
+        Array.from(hostEl.attributes).forEach(attr => {
+            const name = attr.name;
+            if (excludedAttrs.includes(name))
+                return;
+            const val = attr.value;
+            // Handle boolean attributes by presence/absence
+            if (BOOLEAN_ATTRIBUTES.has(name)) {
+                const present = hostEl.hasAttribute(name);
+                const isTrue = present && (val === "" || val === "true");
+                if (name === "spellcheck") {
+                    // spellcheck: set to "true" or "false" explicitly
+                    const newVal = isTrue ? "true" : "false";
+                    if (internalEl.getAttribute(name) !== newVal) {
+                        internalEl.setAttribute(name, newVal);
+                    }
+                }
+                else {
+                    const attrValue = "";
+                    if (isTrue && !internalEl.hasAttribute(name)) {
+                        internalEl.setAttribute(name, attrValue);
+                    }
+                    else if (!isTrue && internalEl.hasAttribute(name)) {
+                        internalEl.removeAttribute(name);
+                    }
+                }
+                return;
+            }
+            // Sync normal attributes
+            if (internalEl.getAttribute(name) !== val) {
+                internalEl.setAttribute(name, val);
+            }
+        });
+        // Remove attributes from internal element that are no longer on host
+        Array.from(internalEl.attributes).forEach(attr => {
+            if (!excludedAttrs.includes(attr.name) &&
+                !hostEl.hasAttribute(attr.name)) {
+                internalEl.removeAttribute(attr.name);
+            }
+        });
+    };
+    if (typeof MutationObserver === "undefined") {
+        return () => { };
+    }
+    // Watch for attribute changes on host and sync to internal element
+    const observer = new MutationObserver(() => {
+        syncAttributes();
+    });
+    observer.observe(hostEl, { attributes: true });
+    syncAttributes();
+    return () => observer.disconnect();
+};
+
+exports.setupAttributeSync = setupAttributeSync;

package/dist/cjs/{base-group-header-BBa6o7j-.js → base-group-header-T64Yqp-w.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-CwXszEUj.js');
-var combineClasses = require('./combine-classes-Cs05zl1M.js');
+var index = require('./index-BVTk936l.js');
+var combineClasses = require('./combine-classes-BWEYe4UE.js');
 
 /**
  * Generates a group header container with a label.
@@ -16,6 +16,3 @@ const generateGroupHeaderContainer = (size, value) => {
 };
 
 exports.generateGroupHeaderContainer = generateGroupHeaderContainer;
-//# sourceMappingURL=base-group-header-BBa6o7j-.js.map
-
-//# sourceMappingURL=base-group-header-BBa6o7j-.js.map

package/dist/cjs/{base-item-z-efWd2M.js → base-item-DbRYZi9C.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-CwXszEUj.js');
-var combineClasses = require('./combine-classes-Cs05zl1M.js');
+var index = require('./index-BVTk936l.js');
+var combineClasses = require('./combine-classes-BWEYe4UE.js');
 
 /**
  * Gets the appropriate icon color based on the provided conditions.
@@ -79,6 +79,30 @@ const generateInformativeIcon = (icon, value, size, disabled, isActive, danger)
 const generateCheckbox = (isSelected, size, disabled, isActive, danger) => {
     return (index.h("div", { class: `vds-base-item__checkbox-icon-${size}` }, index.h("vds-icon", { "svg-icon": isSelected ? "checked" : "unchecked", class: combineClasses.combineClasses(isSelected ? "checkbox-icon-checked" : "", `checkbox-item-${size}`), size: getIconSize(size), color: getIconColor(disabled, isSelected || isActive, danger, true), alt: "checkbox-element" })));
 };
+/**
+ * Highlights matching text within a string by wrapping it in bold tags.
+ *
+ * @param {string} text - The text to search within.
+ * @param {string} highlightText - The text to highlight (case-insensitive).
+ *
+ * @returns {(string | HTMLStencilElement)[]} Array of strings and bold elements.
+ */
+const highlightMatchingText = (text, highlightText) => {
+    if (!highlightText || !text)
+        return [text];
+    const parts = [];
+    const regex = new RegExp(`(${highlightText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+    const textParts = text.split(regex);
+    textParts.forEach((part) => {
+        if (part && part.toLowerCase() === highlightText.toLowerCase()) {
+            parts.push(index.h("span", { class: "highlighted-text" }, part));
+        }
+        else if (part) {
+            parts.push(part);
+        }
+    });
+    return parts;
+};
 /**
  * Generates a label element based on the provided parameters.
 
@@ -87,11 +111,17 @@ const generateCheckbox = (isSelected, size, disabled, isActive, danger) => {
  * @param {boolean} disabled - Whether the label is disabled.
  * @param {boolean} isActive - Whether the label is active.
  * @param {boolean} danger - Whether the label should indicate danger.
+ * @param {string} [highlightText] - Optional text to highlight in bold.
+ * @param {HTMLElement} [slotParent] - Optional reference to the parent element containing the slot for processing slot content.
  *
  * @returns {HTMLStencilElement} The generated label element.
  */
-const generateLabel = (label, size, disabled, isActive, danger) => {
-    return (index.h("span", { class: combineClasses.combineClasses("vds-base-item__label", `vds-base-item__label--size-${size}`, disabled ? "vds-base-item__label--disabled" : "", isActive ? "vds-base-item__label--active" : "", danger ? "vds-base-item__label--danger" : "") }, label ? label : index.h("slot", null)));
+const generateLabel = (label, size, disabled, isActive, danger, highlightText, slotParent) => {
+    let content = index.h("slot", null);
+    if (label) {
+        content = highlightMatchingText(label, highlightText || "");
+    }
+    return (index.h("span", { class: combineClasses.combineClasses("vds-base-item__label", `vds-base-item__label--size-${size}`, disabled ? "vds-base-item__label--disabled" : "", isActive ? "vds-base-item__label--active" : "", danger ? "vds-base-item__label--danger" : "") }, content));
 };
 /**
  * Generates a children icon button based on the provided parameters.
@@ -112,6 +142,3 @@ exports.generateCheckmarkIconButton = generateCheckmarkIconButton;
 exports.generateChildrenIconButton = generateChildrenIconButton;
 exports.generateInformativeIcon = generateInformativeIcon;
 exports.generateLabel = generateLabel;
-//# sourceMappingURL=base-item-z-efWd2M.js.map
-
-//# sourceMappingURL=base-item-z-efWd2M.js.map