@sebgroup/green-core 2.37.1 → 2.37.3

package/bin/context-cli/migrate/units/0/example.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Example migration unit — template for creating new units.
+ *
+ * This file is a documented reference for how to build a migration unit.
+ * It has `enabled: false`, so it will not appear in `green-core-context
+ * migrate list` or be executed during `migrate run`.
+ *
+ * ## How to create a new migration unit
+ *
+ * 1. Create a file under `units/<major>/` (e.g. `units/3/my-migration.ts`)
+ * 2. Export a `MigrationUnit` object as `export const unit`
+ * 3. The registry auto-discovers it from the directory structure — no
+ *    manual registration needed
+ *
+ * ## Multi-framework / multi-syntax coverage
+ *
+ * A single migration unit should cover ONE semantic change across ALL
+ * syntax variants. We cannot determine framework from file extension —
+ * an Angular template may live inside a `.ts` file, plain HTML may live
+ * in a `.html` file that is not Angular, and React JSX uses `.tsx`.
+ *
+ * Instead, define variant patterns for every known syntax form of the
+ * same attribute/property rename:
+ *
+ *   - HTML attribute:         `gds-theme="dark"`
+ *   - Angular property:       `[gdsTheme]="expr"`
+ *   - Angular attr binding:   `[attr.gds-theme]="expr"`
+ *   - React JSX prop:         `gdsTheme="dark"` or `gdsTheme={expr}`
+ *   - JS property assignment: `.gdsTheme = value`
+ *   - JS setAttribute call:   `setAttribute('gds-theme', value)`
+ *
+ * All patterns are applied to ALL files. This means the unit will find
+ * Angular bindings in a `.tsx` file too — that is intentional and harmless.
+ * False positives are better than missed migrations.
+ *
+ * ## Guidelines
+ *
+ * - Keep regex patterns simple and well-commented
+ * - Use non-capturing groups `(?:...)` unless capture is needed
+ * - Reset `lastIndex` before reusing a regex with the `g` flag
+ * - In `detect()`, always set `file` to `filePath` — the engine
+ *   normalises it to a relative path afterwards
+ * - In `apply()`, return `null` if nothing changed
+ * - Mark matches as `manualReview: true` when auto-fix isn't safe
+ * - Prefer line-by-line scanning for readable detect logic
+ * - Always provide `exampleBefore` / `exampleAfter` — they are used by
+ *   coding models as context when applying changes manually
+ *
+ * @module migrate/units/0/example
+ */
+import type { MigrationUnit } from '../../types.js';
+export declare const unit: MigrationUnit;

package/bin/context-cli/migrate/units/0/example.js

@@ -0,0 +1,146 @@
+import "../../../../../chunks/chunk.QU3DSPNU.js";
+const VARIANTS = [
+  // ----- HTML attribute (plain HTML, web component, Angular template) -----
+  {
+    label: "HTML attribute",
+    pattern: /\bgds-theme\s*=\s*["']([^"']*)["']/g,
+    replace: (_match, value) => `gds-mode="${value}"`,
+    message: (m) => `Replace gds-theme="${m[1]}" with gds-mode="${m[1]}"`,
+    safe: true
+  },
+  // ----- Angular property binding: [gdsTheme]="expr" -----
+  {
+    label: "Angular property binding",
+    pattern: /\[gdsTheme\]\s*=\s*"([^"]*)"/g,
+    replace: (_match, expr) => `[gdsMode]="${expr}"`,
+    message: (m) => `Replace [gdsTheme]="${m[1]}" with [gdsMode]="${m[1]}"`,
+    safe: true
+  },
+  // ----- Angular explicit attr binding: [attr.gds-theme]="expr" -----
+  {
+    label: "Angular attr binding",
+    pattern: /\[attr\.gds-theme\]\s*=\s*"([^"]*)"/g,
+    replace: (_match, expr) => `[attr.gds-mode]="${expr}"`,
+    message: (m) => `Replace [attr.gds-theme]="${m[1]}" with [attr.gds-mode]="${m[1]}"`,
+    safe: true
+  },
+  // ----- React JSX prop: gdsTheme="value" or gdsTheme={expr} -----
+  // Negative lookbehind (?<!\.) excludes JS property access like el.gdsTheme
+  {
+    label: "React JSX prop (string)",
+    pattern: /(?<!\.)\bgdsTheme\s*=\s*"([^"]*)"/g,
+    replace: (_match, value) => `gdsMode="${value}"`,
+    message: (m) => `Replace gdsTheme="${m[1]}" with gdsMode="${m[1]}"`,
+    safe: true
+  },
+  {
+    label: "React JSX prop (expression)",
+    pattern: /(?<!\.)\bgdsTheme\s*=\s*\{([^}]*)\}/g,
+    replace: (_match, expr) => `gdsMode={${expr}}`,
+    message: (m) => `Replace gdsTheme={${m[1]}} with gdsMode={${m[1]}}`,
+    safe: true
+  },
+  // ----- JS/TS property assignment: .gdsTheme = value -----
+  {
+    label: "JS property assignment",
+    pattern: /\.gdsTheme\s*=/g,
+    replace: ".gdsMode =",
+    message: () => `Replace .gdsTheme = with .gdsMode =`,
+    safe: true
+  },
+  // ----- JS/TS setAttribute call: setAttribute('gds-theme', ...) -----
+  {
+    label: "setAttribute call",
+    pattern: /setAttribute\(\s*['"]gds-theme['"]/g,
+    replace: `setAttribute('gds-mode'`,
+    message: () => `Replace setAttribute('gds-theme', ...) with setAttribute('gds-mode', ...)`,
+    safe: true
+  }
+];
+function detectVariants(filePath, content, variants) {
+  const matches = [];
+  const lines = content.split("\n");
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    for (const variant of variants) {
+      variant.pattern.lastIndex = 0;
+      let m;
+      while ((m = variant.pattern.exec(line)) !== null) {
+        matches.push({
+          file: filePath,
+          line: i + 1,
+          match: m[0],
+          message: variant.message(m),
+          manualReview: !variant.safe
+        });
+      }
+    }
+  }
+  return matches;
+}
+function applyVariants(content, variants) {
+  let result = content;
+  for (const variant of variants) {
+    if (!variant.safe) continue;
+    variant.pattern.lastIndex = 0;
+    result = result.replace(variant.pattern, variant.replace);
+  }
+  return result !== content ? result : null;
+}
+const unit = {
+  id: "theme-to-mode",
+  enabled: false,
+  // Example only — not a real migration
+  summary: "[Example] Replace deprecated gds-theme / gdsTheme with gds-mode / gdsMode",
+  exampleBefore: [
+    "<!-- HTML attribute -->",
+    '<div gds-theme="dark"><gds-button>Click</gds-button></div>',
+    "",
+    "<!-- Angular property binding -->",
+    '<gds-card [gdsTheme]="theme"></gds-card>',
+    "",
+    "<!-- Angular explicit attr binding -->",
+    '<gds-card [attr.gds-theme]="theme"></gds-card>',
+    "",
+    "<!-- React JSX prop -->",
+    '<GdsCard gdsTheme="dark" />',
+    "<GdsCard gdsTheme={theme} />",
+    "",
+    "// JS property assignment",
+    'el.gdsTheme = "dark"',
+    "",
+    "// JS setAttribute",
+    "el.setAttribute('gds-theme', 'dark')"
+  ].join("\n"),
+  exampleAfter: [
+    "<!-- HTML attribute -->",
+    '<div gds-mode="dark"><gds-button>Click</gds-button></div>',
+    "",
+    "<!-- Angular property binding -->",
+    '<gds-card [gdsMode]="theme"></gds-card>',
+    "",
+    "<!-- Angular explicit attr binding -->",
+    '<gds-card [attr.gds-mode]="theme"></gds-card>',
+    "",
+    "<!-- React JSX prop -->",
+    '<GdsCard gdsMode="dark" />',
+    "<GdsCard gdsMode={theme} />",
+    "",
+    "// JS property assignment",
+    'el.gdsMode = "dark"',
+    "",
+    "// JS setAttribute",
+    "el.setAttribute('gds-mode', 'dark')"
+  ].join("\n"),
+  fileExtensions: [".html", ".ts", ".tsx"],
+  safe: true,
+  detect(filePath, content) {
+    return detectVariants(filePath, content, VARIANTS);
+  },
+  apply(_filePath, content) {
+    return applyVariants(content, VARIANTS);
+  }
+};
+export {
+  unit
+};

package/components/pagination/pagination.component.js

@@ -88,7 +88,10 @@ let GdsPagination = class extends withMarginProps(
     this._isMobile = matches;
   }
   render() {
-    if (__privateGet(this, _GdsPagination_instances, pageCount_get) <= 1) return nothing;
+    const pageCount = __privateGet(this, _GdsPagination_instances, pageCount_get);
+    const showNavigation = pageCount > 1;
+    const pageSizeMenu = __privateMethod(this, _GdsPagination_instances, renderPageSizeMenu_fn).call(this);
+    if (!showNavigation && !pageSizeMenu) return nothing;
     return html`
       <gds-flex
         align-items="center"
@@ -97,8 +100,16 @@ let GdsPagination = class extends withMarginProps(
         gap="${__privateGet(this, _GdsPagination_instances, config_get).gap}"
       >
         ${__privateMethod(this, _GdsPagination_instances, renderLabel_fn).call(this)}
-        <gds-flex aling-items="center" gap="${__privateGet(this, _GdsPagination_instances, config_get).gap}" flex="1">
-          ${[__privateMethod(this, _GdsPagination_instances, renderNavigationControls_fn).call(this), __privateMethod(this, _GdsPagination_instances, renderPageSizeMenu_fn).call(this)]}
+        <gds-flex
+          aling-items="center"
+          gap="${__privateGet(this, _GdsPagination_instances, config_get).gap}"
+          flex="1"
+          justify-content="${showNavigation ? "space-between" : "flex-end"}"
+        >
+          ${[
+      when(showNavigation, () => __privateMethod(this, _GdsPagination_instances, renderNavigationControls_fn).call(this)),
+      pageSizeMenu
+    ]}
         </gds-flex>
       </gds-flex>
     `;