@mcp-b/wc-support 0.2.0

package/dist/utilities/search.js

@@ -0,0 +1,110 @@
+/**
+ * Normalizes a string by removing diacritics, handling Unicode compositions, and converting to lowercase for consistent
+ * string comparison.
+ */
+function normalize(str) {
+    return str
+        .normalize("NFD") // Decompose characters and diacritics
+        .replace(/[\u0300-\u036f]/g, "") // Remove diacritical marks
+        .normalize("NFKC") // Normalize to composed form
+        .toLocaleLowerCase(); // Make it case-insensitive
+}
+/**
+ * Simple case-insensitive search that checks if a query string appears within content.
+ *
+ * @param query The search string to look for
+ * @param content The string to search within
+ * @returns a boolean indicating if the query exists within the content
+ */
+export function exactSearch(query, content) {
+    return normalize(content).includes(normalize(query));
+}
+/**
+ * Fuzzy string matching that handles typos, transpositions, and works with any language/script. The higher the
+ * threshold (0-1), the pickier it is about matches. 0.7 is a good default that catches most typos while avoiding false
+ * positives.
+ *
+ * @param query The search query to look for
+ * @param content The string to search within
+ * @param threshold Minimum similarity threshold (0-1), where 1 requires exact match
+ * @returns a boolean indicating if the fuzzy match meets the threshold
+ */
+export function fuzzySearch(query, content, threshold = 0.7) {
+    if (!content || !query)
+        return false;
+    if (threshold < 0 || threshold > 1)
+        throw new Error("Threshold must be between 0 and 1");
+    if (query.length > content.length)
+        return false;
+    // Normalize strings to handle different Unicode compositions, diacritics, etc.
+    const normalizedContent = normalize(content);
+    const normalizedQuery = normalize(query);
+    // Convert to lowercase with proper Unicode support
+    const lowContent = normalizedContent.toLocaleLowerCase();
+    const lowQuery = normalizedQuery.toLocaleLowerCase();
+    let score = 0;
+    let contentIndex = 0;
+    let queryIndex = 0;
+    let lastMatchIndex = -1;
+    // Split by code point rather than UTF-16 unit so a surrogate pair stays one
+    // character. Array.from iterates identically to spread and states the intent.
+    const contentChars = Array.from(lowContent);
+    const queryChars = Array.from(lowQuery);
+    // Track potential transpositions
+    let lastSkippedChar = "";
+    let lastSkippedIndex = -1;
+    // Scan through content looking for query characters in order
+    while (contentIndex < contentChars.length && queryIndex < queryChars.length) {
+        const currentQueryChar = queryChars[queryIndex];
+        const currentContentChar = contentChars[contentIndex];
+        if (currentContentChar === currentQueryChar) {
+            // Regular match
+            if (lastMatchIndex === -1) {
+                score += 1;
+            }
+            else {
+                score += Math.max(0, 1 - (contentIndex - lastMatchIndex - 1) * 0.1);
+            }
+            lastMatchIndex = contentIndex;
+            queryIndex++;
+            lastSkippedChar = "";
+            lastSkippedIndex = -1;
+        }
+        else if (
+        // Check for transposition with next character
+        queryIndex + 1 < queryChars.length &&
+            contentIndex + 1 < contentChars.length &&
+            currentContentChar === queryChars[queryIndex + 1] &&
+            contentChars[contentIndex + 1] === currentQueryChar) {
+            // Transposition found - add slightly reduced score
+            score += 0.9; // Small penalty for transposition
+            lastMatchIndex = contentIndex + 1;
+            queryIndex += 2;
+            contentIndex++;
+            lastSkippedChar = "";
+            lastSkippedIndex = -1;
+        }
+        else if (
+        // Check for transposition with previously skipped character
+        lastSkippedChar === currentQueryChar &&
+            contentIndex - lastSkippedIndex <= 2) {
+            // Transposition found with previously skipped character
+            score += 0.8; // Slightly larger penalty for non-adjacent transposition
+            lastMatchIndex = contentIndex;
+            queryIndex++;
+            lastSkippedChar = "";
+            lastSkippedIndex = -1;
+        }
+        else {
+            // No match - track this character for potential later transposition
+            lastSkippedChar = currentContentChar;
+            lastSkippedIndex = contentIndex;
+        }
+        contentIndex++;
+    }
+    // Calculate final similarity score
+    const maxScore = queryChars.length;
+    const similarity = queryIndex === queryChars.length ? score / maxScore : 0;
+    return similarity >= threshold;
+}
+//# sourceMappingURL=search.js.map

package/dist/utilities/search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.js","sourceRoot":"","sources":["../../src/utilities/search.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@mcp-b/wc-support",
+  "version": "0.2.0",
+  "description": "Shared base classes, events, utilities, and styles for Sigvelo web component libraries.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WebMCP-org/design-system.git",
+    "directory": "packages/wc-support"
+  },
+  "files": [
+    "dist",
+    "src/themes"
+  ],
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./base/*": {
+      "types": "./dist/base/*.d.ts",
+      "import": "./dist/base/*.js"
+    },
+    "./prefix": {
+      "types": "./dist/prefix.d.ts",
+      "import": "./dist/prefix.js"
+    },
+    "./events": {
+      "types": "./dist/events/index.d.ts",
+      "import": "./dist/events/index.js"
+    },
+    "./events/*": {
+      "types": "./dist/events/*.d.ts",
+      "import": "./dist/events/*.js"
+    },
+    "./styles/*": {
+      "types": "./dist/styles/*.d.ts",
+      "import": "./dist/styles/*.js"
+    },
+    "./utilities": {
+      "types": "./dist/utilities/index.d.ts",
+      "import": "./dist/utilities/index.js"
+    },
+    "./utilities/*": {
+      "types": "./dist/utilities/*.d.ts",
+      "import": "./dist/utilities/*.js"
+    },
+    "./cem-plugins/type-references.js": {
+      "types": "./dist/cem-plugins/type-references.d.ts",
+      "import": "./dist/cem-plugins/type-references.js"
+    },
+    "./themes/*": "./src/themes/*.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@mcp-b/design-tokens": "0.37.0"
+  },
+  "devDependencies": {
+    "lit": "^3.3.2",
+    "lit-html": "^3.3.2",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.10"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0",
+    "lit-html": "^3.0.0"
+  },
+  "scripts": {
+    "build": "node --eval \"require('node:fs').rmSync('dist', { force: true, recursive: true })\" && tsc -p tsconfig.prod.json",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/themes/sigvelo.css

@@ -0,0 +1,28 @@
+@import "@mcp-b/design-tokens";
+
+/* Opt-in accent and design-language presets, inert until data-preset or
+   data-style is set on the root. Imported after the main tokens so their
+   equal-specificity overrides win by order. */
+@import "@mcp-b/design-tokens/color-presets";
+@import "@mcp-b/design-tokens/style-presets";
+
+/*
+ * Web-component-specific additions
+ *
+ * The cloak utility reduces FOUCE when using the autoloader. It hides any
+ * element with the `sigvelo-cloak` class that has an undefined custom element
+ * until all elements are defined or two seconds has elapsed.
+ */
+
+.sigvelo-cloak:has(:not(:defined)) {
+  animation: 2s step-end sigveloCloakAnimation;
+}
+
+@keyframes sigveloCloakAnimation {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/src/themes/utilities.css

@@ -0,0 +1,115 @@
+@layer sigvelo-utilities {
+  /*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  //
+  //  Side label
+  //
+  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
+
+  /* Side label utility */
+  .sigvelo-side-label {
+    --label-width: 10ch;
+
+    display: grid;
+    grid: auto / var(--label-width) 1fr;
+    align-items: center;
+    gap: 0.25em 1em;
+
+    &::part(label) {
+      max-width: none;
+      text-align: end;
+    }
+
+    &::part(description) {
+      grid-column-start: 2;
+      order: 3;
+      margin-block: 0;
+    }
+  }
+
+  /*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  //
+  //  Form validation
+  //
+  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
+
+  /* Valid */
+  .sigvelo-user-valid:state(user-valid),
+  .sigvelo-force-valid {
+    color: var(--sigvelo-color-success-text);
+
+    &::part(label),
+    &::part(description) {
+      color: var(--sigvelo-color-success-text);
+    }
+
+    &::part(visual-box),
+    &:focus::part(visual-box) {
+      border-color: var(--sigvelo-color-success-border);
+      outline-color: var(--sigvelo-color-success-border);
+    }
+  }
+
+  /* Invalid */
+  .sigvelo-user-invalid:state(user-invalid),
+  .sigvelo-force-invalid {
+    color: var(--sigvelo-color-danger-text);
+
+    &::part(label),
+    &::part(description) {
+      color: var(--sigvelo-color-danger-text);
+    }
+
+    &::part(visual-box),
+    &:focus::part(visual-box) {
+      border-color: var(--sigvelo-color-danger-border);
+      outline-color: var(--sigvelo-color-danger-border);
+    }
+  }
+
+  /*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  //
+  //  Visually hidden
+  //
+  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
+
+  .sigvelo-vh,
+  .sigvelo-vh-focusable:not(:focus-within),
+  .sigvelo-vh-label::part(label),
+  .sigvelo-vh-description::part(description) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+
+  /*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  //
+  //  Light/dark utilities
+  //
+  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
+
+  /*
+   * Toggle content based on light/dark. Keyed on the design system's theming
+   * contract: with no [data-theme] override the document follows the operating
+   * system, so the system-preference case has to be stated separately from the
+   * two explicit overrides.
+   */
+  [data-theme="light"] .sigvelo-if-dark,
+  [data-theme="dark"] .sigvelo-if-light {
+    display: none !important;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) .sigvelo-if-light {
+      display: none !important;
+    }
+  }
+
+  @media not all and (prefers-color-scheme: dark) {
+    :root:not([data-theme="dark"]) .sigvelo-if-dark {
+      display: none !important;
+    }
+  }
+}