fix(decorators): patch container-responsive styles to fix stale container queries and add customElement wrapper that sets .is and warns on class/tag mismatch

ts/decorators.containerresponsive.ts

@@ -1,19 +1,47 @@
+import { unsafeCSS, type CSSResult } from 'lit';
 import * as domtools from '@design.estate/dees-domtools';
 
+const camelToKebab = (name: string) =>
+  name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+
 export function containerResponsive() {
   return function (target: any) {
     const tagName: string =
       target.is || target.name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-    const containerStyles = domtools.breakpoints.containerContextStyles(tagName);
 
-    const original = target.styles;
-    if (Array.isArray(original)) {
-      target.styles = [...original, containerStyles];
-    } else if (original) {
-      target.styles = [original, containerStyles];
+    // If .is differs from the regex-derived name, cssManager.cssFor*(css, this)
+    // in static styles (evaluated before decorators) used the wrong container name.
+    // Fix those stale references now.
+    const derivedName = target.name ? camelToKebab(target.name) : null;
+    if (derivedName && derivedName !== tagName) {
+      const fixStyle = (style: CSSResult) => {
+        if (style && style.cssText && style.cssText.includes(`@container ${derivedName}`)) {
+          return unsafeCSS(
+            style.cssText.replaceAll(`@container ${derivedName}`, `@container ${tagName}`)
+          );
+        }
+        return style;
+      };
+
+      const original = target.styles;
+      if (Array.isArray(original)) {
+        target.styles = original.map(fixStyle);
+      } else if (original) {
+        target.styles = fixStyle(original);
+      }
+    }
+
+    // Append containment context styles
+    const containerStyles = domtools.breakpoints.containerContextStyles(tagName);
+    const current = target.styles;
+    if (Array.isArray(current)) {
+      target.styles = [...current, containerStyles];
+    } else if (current) {
+      target.styles = [current, containerStyles];
     } else {
       target.styles = [containerStyles];
     }
+
     return target;
   };
 }